Show virtual keyboard on mobile phones in javascript

Question

I'm creating a mobile version of my site. There's a part of the site where a dialog pops up with a text input. Normally I would just use jQuery to bring focus to the text input, but that's not working. Here's what I'm trying:

$("#textinput").focus();
$("#textinput").click(); 
$("#textinput").trigger("tap"); //jQuery Mobile

None of them seem to work. Any ideas? I've been testing it on my DroidX. I'm using jQuery Mobile but I'm open to other libraries if they help.

Answer 1

You can't, at least not in iOS (iPhone), and I believe Android as well. It's a usability issue that the keyboard should not be allowed to be triggered except by user input (it's just annoying if it's automatic).

There are a couple of ways I know of to get around this:

• prompt() opens the keyboard
• If you trigger the .focus() from within a .click() event (eg from opening your dialog), the keyboard shows up

Answer 2

$("#textinput").focus();

Opening the keyboard by setting the focus to an input element, will only work if the focus is set within a "user context" (eg click, mousedown, mouseup).

From the "script context" (setTimeout, callback returned from an ajax call) the keyboard won't show up.

Answer 3

you can use:

$(textFiled).trigger("focus");

you can put this code in some function that will trigger on opening some overlay, or when the document is ready.