Unity WebGL - Prevent From eating up all Mouse / Keyboard Input? (HTML Input Fields)

Questions & Answers
1

Unity 5.4

Building a Unity WebGL application (not a game) that handles all 3D content on the Unity side of things, and all the UI is built using HTML/CSS/JS. By default, WebGLInput.captureAllKeyboardInput is set to true, which causes any input fields that require keyboard (text) input to be broken, as any keyboard controls are automatically being eaten up by Unity rather than going to the input field. Doing

#if !UNITY_EDITOR && UNITY_WEBGL WebGLInput.captureAllKeyboardInput = false; #endif

fixes the issue with input fields, but causes unity to ignore ALL keyboard inputs, even after the element is focused, however adding

tabindex="1"

to the fixes it so that keyboard input on HTML input fields works when focused, and keyboard controls inside the Unity WebGL app works when focused as well. (this is all per the docs: Unity - Scripting API: WebGLInput.captureAllKeyboardInput). So that’s all working fine.

However, the Unity WebGL application is still causing issues with some input fields using MOUSE (not keyboard) controls. Namely I’ve noticed it on input type=“range” fields (HTML5 sliders) and input type="number (using keyboard to type in numbers works, but mouse clicking up and down do not).

Is there any sort of workaround to fix this? I essentially need to prevent the Unity WebGL canvas to not automatically take all mouse inputs, unless the element is clicked/focused first (just like the way the keyboard controls work). Anything to change on the Unity side to fix this? Or do I need to write some custom JavaScript to handle all input and determine whether it’s intended for the Unity scene or the HTML UI?

2

This is more of a “hit it with a hammer solution”, but you could just overwrite addEventListener to prevent unity from calling it. This may, however, break other javascripts on the page. In our case, we were using jquery and everything continued to work as normal.

window.addEventListener = function() { return true };