Mobile Safari Autofocus text field

Javascript Focus Mobile Safari Autofocus

Javascript Problem Overview

In Mobile Safari I am unable to focus onto a text field after setting a delay period. I'm attaching some example code showcasing the issue. If, onclick of the button, you trigger .focus(), everything works as expected. If you hang the focus on a callback, like the setTimeout function, then it fails ONLY in mobile safari. In all other browsers, there is a delay, then the focus occurs.

Confusingly, the "focusin" event is triggered, even in mobile safari. This (and ~~similar~~ comments in SO) make me think that it's a mobile safari bug. Any guidance will be accepted.

I've tested in the emulator, and on iPhone 3GS/4 iOS4.

Example HTML:

<!DOCTYPE html> 
  <html lang='en'> 
    <head> 
      <title>Autofocus tests</title> 
      <meta content='width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0' name='viewport'> 
      <meta content='yes' name='apple-mobile-web-app-capable'> 
    </head> 
    <body>
      <h1> 
        Show keyboard without user focus and select text:
      </h1> 
      <p> 
        <button id='focus-test-button'> 
          Should focus on input when you click me after .5 second
        </button> 
        <input id='focus-test-input' type='number' value='20'> 
      </p> 
      <script type="text/javascript"> 
        //<![CDATA[
        var button = document.getElementById('focus-test-button');
        var input  = document.getElementById('focus-test-input');
        
        input.addEventListener('focusin', function(event) {
          console.log('focus');
          console.log(event);
        });
        
        button.addEventListener('click', function() {
          // *** If triggered immediately - functionality occurs as expected
          // input.focus();
          // *** If called by callback - triggers the focusin event, but does not bring up keyboard or cursor
          var t = setTimeout("input.focus();",500);
        });
        //]]>
      </script>
    </body>
  </html>

~~Similar~~ SO questions:

Javascript Solutions

Solution 1 - Javascript

I think this is a feature of mobile Safari rather than a bug. In our work on FastClick, my colleagues and I found that iOS will only allow focus to be triggered on other elements, from within a function, if the first function in the call stack was triggered by a non-programmatic event. In your case, the call to setTimeout starts a new call stack, and the security mechanism kicks in to prevent you from setting focus on the input.

Remember that on iOS setting focus on an input element brings up the keyboard - so all those web pages out there that set focus on an input element on page load, like Google does, would be extremely annoying to use on iOS. I guess Apple decided they had to do something to prevent this. So I disagree with @DA: this is a feature not a bug.

There's no known workaround for this, so you'll have to ditch the idea of using a delay.

Update August 2012:

As of iOS 5, handlers triggered by synthesised click events are allowed to trigger focus on input elements. Try the updated FastClick input focus example.

Solution 2 - Javascript

I was able to raise the keyboard by dispatching a click event only when the original event was from user interaction, not from setTimeout. I believe the outcome is that you can raise the keyboard from a touchend event, but still not from a timeout.

Solution 3 - Javascript

It seems that focus() works only, if you have added the site to the home screen and has opened the site with this link.

Solution 4 - Javascript

Adding to Matt answer. At least on Safari on iOS 5.1, this issue is fixed. Your FastClick works, that is, synthesizing a click event won't fail focus. However this does not help people who want their single focus() code to work on all iOS versions, sigh.

Solution 5 - Javascript

I was capable of making .focus() work by attaching it to two separate events in the events map but it's kind of hacky.

After adding FastClick.js, this is what happens in iOS: .focus() only works when its activated by a function that is attached to an event. BUT focus is also an event in mobile safari's event map that is actually called when you use jQuery's .focus(). SO you can be redundant and attach another .focus() on the focus event of the object to make certain that it pulls through. This works especially well when you're creating an input in the DOM. I like programming for MeteorJS lately, this is what the solution looks like there:

Template.templateName.events({
    "click button":function(){
        Session.set("makeButtonVisible",true);
        $("input.created").focus();
    },
    "focus input.created":function(){
        $("input.created").focus();
    }
});

Hopefully this is useful to someone out there, took me like two hours to figure this one out.

EDIT: Well, for MeteorJS in particular, you can't use Template.templateName.rendered function either because the .focus() must be invoked from an event. BUT for some reason when you add an input through jQuery you can focus on it inside the event. Guess that's the way to go. This is what I ended up doing:

Template.templateName.events({
    "click button":function(){
        $("body").append("<input class='created' type='tel'>");
        $("input.created").focus();
    }
});

Solution 6 - Javascript

You answered yourself. You need just trigger if you use Jquery. Change focus() on trigger("focus"); in any part of your code.

$("#searchField").trigger("focus");

Content Type	Original Author	Original Content on Stackoverflow
Question	boymc	View Question on Stackoverflow
Solution 1 - Javascript	Matthew	View Answer on Stackoverflow
Solution 2 - Javascript	Nick Saretzky	View Answer on Stackoverflow
Solution 3 - Javascript	elweilando	View Answer on Stackoverflow
Solution 4 - Javascript	dodysw	View Answer on Stackoverflow
Solution 5 - Javascript	Marz	View Answer on Stackoverflow
Solution 6 - Javascript	Dimash	View Answer on Stackoverflow