Mobile Safari: JavaScript Focus() Method on Inputfield Only Works with Click

Can't Set Focus in Safari

EDITED TO INCLUDE .focus()

Try

javascript:document.getElementById('identNum').focus().setSelectionRange(0, 999);

Mobile devices, in particular iOS can be quite funny about select();

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange

EDIT: A note on input focus without user interaction

As found by @zappullae

It appears that in recent versions of iOS, Apple require user interaction in order to activate the keyboard, so this will not be possible on page load.

https://medium.com/@brunn/autofocus-in-ios-safari-458215514a5f

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.

Mobile Safari jQuery select() on focus input doesn´t work

I changed the javascript to this (changed how selection of text is done and how to get input variable):

        $(document).ready(function() {
        //Select text on focus for input
        $("input:text").focus(focustext);
    });
    function focustext() {
        var input = this;
        setTimeout(function () {
            input.selectionStart = 0;
            input.selectionEnd = input.val().length;
        },100);
    }

and now it works as intented. inputs with type=number does not seem to work though.

I have tested this on iOS6 and iOS7, and it also works in latest Chrome and IE on Windows 7. IE in compability mode does not work, though.

IOS show keyboard on input focus

I found a solution, click() didn't work, but i figured it out.

searchMobileToggle.addEventListener('click', function() {
         if(mobileSearchblock.classList.contains('active')) {
            searchField.setAttribute('autofocus', 'autofocus');
            searchField.focus();
        }
        else {
            searchField.removeAttribute('autofocus');
        }
    });

I was working with vue.js that was removing input autofocus attribute, when the component was loaded.
So i had it on click, but there was another problem, the autofocus only worked once, but combined with focus(), it now work all the time :)

Thanks for your help !

How to programmatically focus a text input in iOS, coming from a trusted onchange event of a select tag?

You probably found that there is a flag called keyboardDisplayRequiresUserAction in Cordova project options. It can be set to false to lift the restrictions on the use of focus() in native iOS applications. For normal Web applications, however, I haven't seen any official documentation about these restrictions in iOS browsers.

After many unsuccessful attemps to make focus() work with the select element in iOS, the only workaround that I found is to use a replacement control, for example jQuery's select2, as illustrated in this jsfiddle. The CSS attributes could be refined to make it look more similar to the native select element.

The call to myTextInput.focus() can be made in the mouseup event handler of the list items, that handler having been set the first time the dropdown list was opened:

var firstOpen = true;

$(mySelect).select2({
    minimumResultsForSearch: Infinity
}).on('change', function(e) {
    console.log("change event was fired");
}).on('select2:open', function(e) {
    if (firstOpen) {
        firstOpen = false;
        $('.select2-results ul').on('mouseup', function(e) {
            myTextInput.focus();
        });
    }
});