iOS does not show keyboard on .focus()

[offsky]

When I call .focus() on one of my text inputs or textareas, the iPhone keyboard does not automatically appear.

http://jsfiddle.net/kzUuG/1/

Tested on iPhone 4 running iOS5. This may be a jquery issue instead of jquerymobile, Im not sure. But, it would be nice if there was some workaround either way.

[ghost]

As far as I know it isn't possible to show the iOS keyboard via javascript. You can focus an element, Safari will draw a blue "focused" border, but it won't raise the keyboard.

I'd be eager to learn a workaround if there's one.

[eddiemonge]

iOS won't, as far as I can tell from testing, show the keyboard without some kind of user interaction.

Trying a setTimeout to load it doesnt work. But setting the focus on another element's onClick event brings it up.

http://jsbin.com/inunis/8

I believe this should be closed as an invalid bug.

[Wilto]

Yeah, unfortunately, I’m third-ing this one: I’ve yet to find a way to trigger the iOS keyboard on focus.

[chrisrowe]

This now appears to be working under the button click. (iOS9 beta4)

[y-x-c]

following code works on my mobile Safari, Chrome and also desktop browser

// div is some selected element
                var f = function(event) {
                    $timeout(function() { // angular way, setTimeout is OK
                        input[0].focus();
                        event.preventDefault();
                    })
                };
                var mobile = false;
                div.on('click', function(event) {
                    if(mobile) return;
                    f(event);
                });

                div.on('touchstart', function(event) {
                    mobile = true;
                    f(event);
                });

                div.on('touchend', function(event) {
                    event.preventDefault();
                    event.stopPropagation();
                });

[jaykyburz]

Guys, I have the opposite problem on my page right now. Every time I build the UI on my single page app the UI shows. There are not text input boxes at all!

Nothing do to with this project, I just came across this discussion when searching for answers.

[ivegotwings]

Why was this closed? The problem still exists at 10.1.1.

[atakanaydin]

+1 any fix ?

[arschmitz]

.focus is a core jquery method not jquery mobile so we wont be making any changes to focus within mobile

[webuxr]

Any chance someone has a link to this issue in jQuery's issue queue? I'm going to do my Google fu on this but thought a reference link would be quite helpful here.

If I find anything, I'll try to circle-back and post my finidings.

Please note: I found this issue because I'm looking for a solution to pop the iOS keyboard on :focus of my search input (type=search).

[xgz123]

@orthocenter he is totally right

[mailsonlp]

This has being worked for me.

$(".mobile-search").click(function(){ $("input[name='term']").trigger('focus') });

[bankurukodanda]

I tried it's not working for me on page load I directly placed with out any event
$("input[name='term']").trigger('focus')
can anyone help me

[emilium]

Safari accepts the focus event when it is inside a touch event handler.
$(document).on('touchstart', 'element', function(){ input.focus(); }

[stajne]

But how to do it on load?

[AmahAjavon]

window.onload = function () { document.getElementById('foo') && document.getElementById('foo').focus(); };

[fiazmr2]

See what has worked for me across android and iOS

1. you can use the trigger click functionality for the input field. But an event has to be declared before hand which sets the focus. See code below
   $input.off('click').on('click', function (){ $input.focus(); }) $input.trigger('click');

2. If that doesnt work for you try this one setTimeout(function() {
   $input..focus();
   }, 100);
   $input.[0].setSelectionRange(0, 0);`
   the setSelectionRange is a hack used to force the keyboard to be shown up on iOS