A Unity WebGL workaround to enable mobile input (virtual keyboard) be triggered by Input Fields

When you try to interact with any input field in a WebGL application in mobile, the virtual keyboard will never be triggered. This is a fix to that. Also, this can be used to enable copy/paste to the input fields

Simply add the "KeyboardController" component to any object in the scene

This workaround is a combination of getting inputs natively from a html input field and binds them to a Input Field KeyboardController.cs is a Singleton that will manage automatically this binding of input fields and will be the bridge between the native javascript calls and the interaction with input fields. This solution works with TMPro Input fields, just add the DEFINE #TMP_PRESENT to your project

If you are using a custom index.html template, check the FixIndexFile.cs script, because it is a post build process to add some necessary entries to the index.html file (or add this to your index.html manually)

<script>
	function FixInputOnSubmit() {
		document.getElementById("fixInput").blur();
		event.preventDefault();
	}
	function FixInputOnBlur() {
		gameInstance.SendMessage('_WebGLKeyboard', 'LoseFocus');
	}
	function FixInputUpdate() {
		gameInstance.SendMessage('_WebGLKeyboard', 'ReceiveInputChange', document.getElementById("fixInput").value);
	}
</script>
<div>
	<form onsubmit="FixInputOnSubmit()" autocomplete="off" style="width: 0px; height: 0px; position: absolute; top: -9999px;">
		<input type="text" id="fixInput" oninput="FixInputUpdate()" onblur="FixInputOnBlur()" style="font-size: 42px;">
	</form>
</div>

The caret position and text selection will not work properly