Mobile Safari Autofocus text field

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.

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.

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

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.

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();
    }
});

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");