I am developing my game for mobile html5.
I need an input field where the player enters his name. I am using the DirtyLarry lib and it’s working on desktop browser, but on mobile the device keyboard is not shown…
Tried to use gui.show_keyboard() but it does not seem to help.
Is this even possible?
The gui.show_keyboard() is for the devices themselves (iPhone, Android), not the browser (HTML5).
This could of course be more clearly stated in the documentation (I’ve added a ticket for it)
Thought so…
So any idea what might be done for html5 keyboard on mobile?
Defold isn’t optimized for mobile HTML5. It will be slow no matter what you do…
When HTML5 target gets native extensions it will probably be easy to add support for this.
You could probably implement a simple virtual on screen in game keyboard too.
I actually found that it is working nicely for simple games on mobile html5…
Anyways, too bad there is no way to show the keyboard. 
What type of device are you testing on? Don’t worry the good solution will probably come as soon as native extensions for HTML5 are released!
Tested it on Nexus 5x, iPhone 5S, Samsung S6, Xiaomi Redmi Note 3
Working fine on all those
Would you be willing to post links to any of your projects? How simple are you talking?
Can’t post links yet since no game is live.
By simple I am talking about platformers with spine animations and some particles
Did you manage to find a solution for this?
Someone motivated could make a Native Extension for this.
How would the extension? Would it be a html5 extension that can all up the android keyboard? Any pointers would be helpful…
I tried modding the example android extension to call up a keyboard (InputMethodManager) but it still didn’t work on mobile html5
For mobile keyboard you have to create an input field and then give it focus, then get the text entered to it. If you search like “html5 game mobile keyboard input” you can find examples. Then you want to have a function to deal with this text input in your game and close the input focus when entered. You probably don’t even need a NE for this it might be more easily doable with html5.run() and then polling a listener on update while waiting for input. If you’re not experience with JS this might be harder for you but try to look up examples and see if you can get it working on your own first.
So for the last two days I’ve been trying to get the keyboard to show up but it simply won’t popup…Here’s my pure javascript code. Kindly assist.
If I unhide the input field, I can see the field gets focus but no keyboard pops out. Tested on both Firefox and Chrome Android
EDIT: I got the keyboard to show by putting my html5.run() in on_input, also remove the hidden = true line, you can hide the input_field with inline css.
Now I just have to figure out how to get each key clicked back to my game.
@Pkeod, You said I should poll a listener ? Can you assist me with this part?
You should be able to drop the code in a defold project and have it run.
js_data = [[
var input = document.createElement('input');
input.type = "text";
input.name = "test";
input.setAttribute('id', "foo");
input.addEventListener('click', isClicked);
document.body.appendChild(input);
document.getElementById("foo").hidden = true;
function isClicked(){
this.focus();
};
document.getElementById('foo').click();
-- window.onload = function () {
-- document.getElementById('foo') &&
--document.getElementById('foo').focus(); };
]]
html5.run(js_data)
I’ve created a ticket to track a solution where this is handled by the engine: DEF-3503
I can’t make any promises on when this would be supported natively by Defold though.
You should be able to set up a timer that will html5_run() javascript to return the text at document.getElementById(“foo”).value
Interested to see how this turns out. I need an HTML5 mobile keyboard too.
Doesn’t work. Every key pressed on mobile keyboard currently responds with keyCode 229 except some number pads on some keyboards. Gboard, for example gives only keyCode 229 while the default Android keyboard only number keys respond correctly. It’s so confusing…
Hmm. We shouldn’t be getting any sort of keycodes.
I tried this on Android using your code and adding the timer, and it seems to work for me.
local function get_text()
local js_data = [[
function get_text_value(){
var value = document.getElementById("foo").value;
return value;
};
get_text_value();
]]
local text_value = html5.run(js_data)
--print value to console
pprint(text_value)
--set value to a GUI text node (requires gui node setup)
--gui.set_text(gui.get_node("text_node"), text_value)
end
function init(self)
msg.post(".", "acquire_input_focus")
local js_data = [[
var input = document.createElement('input');
input.type = "text";
input.name = "test";
input.setAttribute('id', "foo");
input.addEventListener('click', isClicked);
document.body.appendChild(input);
function isClicked(){
this.focus();
};
document.getElementById('foo').click();
]]
html5.run(js_data)
timer.delay(0.5, true, get_text)
end
Note this is just example - finer control of the timer should probably be used in production.
Also, thanks for the neat little way to include the JS, I was originally using an index.html template
This is first reason why i made retro ingame keyboard for player’s nickname instead using of native keyboard:
The second reason is control on non-latin alphabet. Don’t forget that user can try to input someone like “моё замечательное имя” and your UI should not break from this.
That seems like the best way to go. It’s obviously a lot more work, but the results look great and have many benefits.
Also to confirm,
“моё замечательное имя” in the JavaScript example results in GUI value like this:
I think maybe fonts could be configured to display it correctly though, no?
