Version: 2022.3
Interaction with browser scripting
Debug and troubleshoot WebGL builds

Input in WebGL

Gamepad and Joystick support

Unity WebGL supports Input and InputSystem for gamepads and joysticks for browsers that support the HTML5 Gamepad API.

Some browsers allow access to input devices only after the end user interacts with the device while the application is in focus. This type of security measure prevents the end user from using connected devices for browser fingerprinting purposes. Therefore, your application should instruct the user to press a button on their gamepad/joystick before you call Input.GetJoystickNames() to check for connected devices.

The WebGL game controller mapping for the old input system aligns with the W3 spec, where the button mapping layout is laid out as follows:

Buttons 描述
buttons[0] Bottom button in right cluster = CROSS (X)
buttons[1] Right button in right cluster = CIRCLE
buttons[2] Left button in right cluster = SQUARE
buttons[3] Top button in right cluster = TRIANGLE

Note: As WebGL follows the W3 spec, it might not be consistent with other platforms, and requires unique handling if you’re targeting multiple platforms simultaneously, such as Windows and Web.

Touch support

Unity WebGL doesn’t officially support mobile devices (see WebGL browser compatibility) yet, but it does implement Input.touches and other related APIs in browsers and devices with touch support. By default, mobile devices display a soft keyboard on the touch screen for entering text into UI input fields. To disable this behavior, use the WebGLInput.mobileKeyboardSupport property.

Keyboard input and focus handling

By default, Unity WebGL processes all keyboard input the web page receives, regardless of whether the WebGL canvas has focus or not. This allows the end user use a keyboard-based application without the need to click on the WebGL canvas.

The following notes apply to specific keyboard inputs as described below:

Keyboard input behavior 描述
HTML elements (such as text fields) Typically, introducing HTML elements (such as text fields) can cause errors if included in the web page that’s meant to receive keyboard inputs. Unity consumes the input events before the rest of the page can receive them.
To make HTML elements receive a keyboard input, set WebGLInput.captureAllKeyboardInput to false. This way, the application receives input only if the WebGL canvas has focus.
Esc key Because the Esc key is protected in the web environment, some browsers like Safari block the ability to use it to switch to full-screen mode and others like Google Chrome behave unpredictably. When the browser is in full-screen mode, the Esc key is reserved for the action of exiting the full-screen mode. Depending on your browser type, clicking the Esc key might not always trigger the event to forward from the browser to the application.
HideMobileInput The HideMobileInput option in TextMeshPro (also known as TMP) input fields has no effect on the Web platform. This is because a text input field is required to trigger the virtual keyboard in browsers. The Web platform instantiates a text input field to trigger the virtual keyboard when the Unity player is expecting text entry, which appears above the virtual keyboard much like other platforms. Because the virtual keyboard relies on the mobile text input field, it can’t appear hidden on the web platform.

Mobile Sensor support

Unity WebGL doesn’t officially support mobile devices (see WebGL browser compatibility), but for browsers and mobile devices with touch support, Unity WebGL includes support for the following sensors:

Important: Browsers allow sensor input only in secure contexts. That is, you must serve the page over HTTPS. The single exception is http://localhost, which you can use during development.

Additional resources:

Interaction with browser scripting
Debug and troubleshoot WebGL builds