Hi, I know this is an old thread, but I thought Id share something I managed to get working. The code shown below does a few different things, so I will explain after the code.
self.platform_info = sys.get_sys_info()
-- The system OS name: "Darwin", "Linux", "Windows", "HTML5", "Android" or "iPhone OS"
if self.platform_info.system_name == "HTML5" then
local html_data = [[
var html = "<div style='position:absolute;left:0px;top:0px;z-index:-1;'>";
html = html + "<input id='hiddenInput' type='text' name='hiddenInput' /></div>";
document.getElementById("canvas-container").insertAdjacentHTML("afterend", html);
]]
html5.run(html_data)
local js_data = [[
var script = document.createElement("script");
var funcscr = "var inputcurr = '';\n";
funcscr = funcscr + "var inputdata = {};\n";
funcscr = funcscr + "var winsize = [window.width,window.height];\n";
funcscr = funcscr + "window.addEventListener('resize', windowSizeChanged);\n";
funcscr = funcscr + "window.addEventListener('load', function() {\n";
funcscr = funcscr + " winsize = [window.width,window.height];\n";
funcscr = funcscr + "})\n";
funcscr = funcscr + "function windowSizeChanged() {\n";
funcscr = funcscr + " window.resizeTo(winsize[0],winsize[1]);\n";
funcscr = funcscr + "}\n";
funcscr = funcscr + "const inputtext = document.querySelector('#hiddenInput');\n";
funcscr = funcscr + "inputtext.addEventListener('keydown', (e) => {\n";
funcscr = funcscr + " var key = e.key;\n";
funcscr = funcscr + "});\n";
funcscr = funcscr + "function clearFocus(){ \n ";
funcscr = funcscr + " inputcurr = 'none';\n";
funcscr = funcscr + " var canvas = document.getElementById('canvas');\n";
funcscr = funcscr + " canvas.focus();\n";
funcscr = funcscr + "}\n";
funcscr = funcscr + "function clearInput(id, curr){ \n ";
funcscr = funcscr + " inputdata[id] = '';\n";
funcscr = funcscr + " inputcurr = id;\n";
funcscr = funcscr + " document.getElementById('hiddenInput').value = curr;\n";
funcscr = funcscr + " var input = document.getElementById('hiddenInput');\n";
funcscr = funcscr + " input.focus();\n";
funcscr = funcscr + "}\n";
funcscr = funcscr + "function getInputText(id){ \n ";
funcscr = funcscr + " var input = document.getElementById('hiddenInput');\n";
funcscr = funcscr + " input.focus();\n";
funcscr = funcscr + " inputdata[id] = input.value;\n";
funcscr = funcscr + " return inputdata[id];\n";
funcscr = funcscr + "}\n";
script.innerHTML = funcscr;
document.body.appendChild(script);
]]
html5.run(js_data)
end
There are two sections of code. The first adds some html to the canvas container to provide a hidden input text box as others have described above.
The second set of code injects a resize handler, keydown handler and a number of functions to be used in the Defold script.
Within your script, when you want to start getting the text from the input box use:
html5.run( "clearInput('"..myid.."', 'starting text')" )
This will insert “starting text” into the hidden text box and create a mapped response using myid defold variable - note the myid must be some valid string. Whenever you want to use the text input of that input you can use:
local value = html5.run("getInputText('"..myid.."')")
The clearFocus function is used to hide away the keyboard.
One additional thing you may need to to is to disable the “resize” handler in the default js-web template. This is because if you have the keyboard popup the game will attempt to resize, which is not really useful in these cases. Heres where I commented out the handler in my js-web template:
resize_game_canvas();
//window.addEventListener('resize', resize_game_canvas, false); <----------------------
window.addEventListener('orientationchange', resize_game_canvas, false);
window.addEventListener('focus', resize_game_canvas, false);
</script>
Hope this helps. Im glad to have a working solution for android. Will need to test on IOS.
