How can enter text on WebGL Mobile?
Like many other posts I have seen, my Android WebGL game’s keyboard does not show up, but the mobile input works fine from my laptop’s keyboard while debugging with chrome://inspect/#devices from my laptop.
In trying to simulate a keyboard press, I dispatched a keydown event but it is not read - probably because I am not doing a proper Unity Event Trigger. Any idea on how to properly replicate a keyboard press with JS to Unity with an event trigger?
document.dispatchEvent(new KeyboardEvent('keydown', {'code': 'KeyA'}));
I was able to bring up a mobile keyboard, but still couldn’t get the text to be read by Unity.
function _JS_MobileKeyboard_Show(text, keyboardType, autocorrection, multiline, secure, alert, placeholder, characterLimit) {
console.log("_JS_MobileKeyboard_Show")
if (mobile_input_hide_delay) {
clearTimeout(mobile_input_hide_delay);
mobile_input_hide_delay = null
}
text = UTF8ToString(text);
mobile_input_text = text;
placeholder = UTF8ToString(placeholder);
var container = document.body;
var hasExistingMobileInput = !!mobile_input;
var input_type;
var KEYBOARD_TYPE_NUMBERS_AND_PUNCTUATION = 2;
var KEYBOARD_TYPE_URL = 3;
var KEYBOARD_TYPE_NUMBER_PAD = 4;
var KEYBOARD_TYPE_PHONE_PAD = 5;
var KEYBOARD_TYPE_EMAIL_ADDRESS = 7;
if (!secure) {
switch (keyboardType) {
case KEYBOARD_TYPE_EMAIL_ADDRESS:
input_type = "email";
break;
case KEYBOARD_TYPE_URL:
input_type = "url";
break;
case KEYBOARD_TYPE_NUMBERS_AND_PUNCTUATION:
case KEYBOARD_TYPE_NUMBER_PAD:
case KEYBOARD_TYPE_PHONE_PAD:
input_type = "number";
break;
default:
input_type = "text";
break
}
} else {
input_type = "password"
}
if (hasExistingMobileInput) {
if (mobile_input.multiline != multiline) {
_JS_MobileKeyboard_Hide(false);
return
}
}
var inputContainer = mobile_input || document.createElement("div");
if (!hasExistingMobileInput) {
inputContainer.style = "width:100%; position:fixed; bottom:0px; margin:0px; padding:0px; left:0px; border: 1px solid #000; border-radius: 5px; background-color:#fff; font-size:14pt;";
container.appendChild(inputContainer);
mobile_input = inputContainer
}
var input = hasExistingMobileInput ? mobile_input.input : document.createElement(multiline ? "textarea" : "input");
mobile_input.multiline = multiline;
mobile_input.secure = secure;
mobile_input.keyboardType = keyboardType;
mobile_input.inputType = input_type;
input.type = input_type;
input.style = "width:calc(100% - 85px); " + (multiline ? "height:100px;" : "") + "vertical-align:top; border-radius: 5px; outline:none; cursor:default; resize:none; border:0px; padding:10px 0px 10px 10px;";
input.spellcheck = autocorrection ? true : false;
input.maxLength = characterLimit > 0 ? characterLimit : 524288;
input.value = text;
input.placeholder = placeholder;
if (!hasExistingMobileInput) {
inputContainer.appendChild(input);
inputContainer.input = input
}
if (!hasExistingMobileInput) {
var okButton = document.createElement("button");
okButton.innerText = "OK";
okButton.style = "border:0; position:absolute; left:calc(100% - 75px); top:0px; width:75px; height:100%; margin:0; padding:0; border-radius: 5px; background-color:#fff";
okButton.addEventListener("touchend", function() {
_JS_MobileKeyboard_Hide(true)
});
inputContainer.appendChild(okButton);
inputContainer.okButton = okButton;
input.addEventListener("keyup", function(e) {
if (input.parentNode.multiline) return;
if (e.code == "Enter" || e.which == 13 || e.keyCode == 13) {
_JS_MobileKeyboard_Hide(true)
}
});
input.addEventListener("blur", function(e) {
_JS_MobileKeyboard_Hide(true);
e.stopPropagation();
e.preventDefault()
});
input.select();
input.focus()
} else {
input.select()
}
}
Any guidance here would be greatly appreciated!