Can't Set Focus in Safari

javascript html ios safari setfocus

17,213

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

17,213

glez

Updated on June 04, 2022

Comments

glez almost 2 years

I'm trying to set focus to a particular edit field when a page opens or button is pressed. The following simple HTML/Javascript (Test.html) works with Firefox and Chrome but not Safari. Safari will clear the text with the clear button and post it with find button but not select it when the select button is pressed. Any help would be appreciated. (iOS 7 on an iPad 2)

Update -- Replaced with working code

<html>

<head>

<!-- Latest JQuery; Must be loaded before Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>


<script>
$(document).ready(function()
{
    var identNum = document.getElementById("identNum");
    identNum.value = "AAAABBBB111"
    identNum.focus();
    identNum.setSelectionRange(0, identNum.value.length);
});
</script>


<body>


<div>
    <form class="form-horizontal" name="myForm" role="form" action="Test" method="post">
        <div class="form-group" align="center">
            <div>
                <label class="control-label">Text:</label>
                <input type="text" id="identNum" name="identNum" size="25" value="" style="text-align:center;'">
            </div>

            <div>
                <button class="btn btn-primary">Find</button>
                <a class="btn" onclick="javascript:document.getElementById('identNum').value=''" >Clear</a>
                <a class="btn" onclick="javascript:document.getElementById('identNum').focus(); document.getElementById('identNum').setSelectionRange(0, identNum.value.length)" >Select</a>
            </div>

        </div>
    </form>
</div>

</body>

</html>

glez about 6 years

Thanks Perran. It works on the page ready() for Firefox and Chrome but not when the select button is pressed (used to work). Safari doesn't work in either case, load or button press. Firefox and Chrome mobile also work with select().
Perran Mitchell about 6 years

D'oh. Forgot - you need to focus the input first - so .focus().setSelectionRange(0, 9999). Just tested in chrome, firefox, safari 11, iOS11, iOS 8, iOS7
glez about 6 years

Yea buddy, that worked! Thanks for the help. I had to separate out the focus() and setSelectRange() calls, see above fixed code. One thing I noticed on Safari only is that the selected text from the ready() function is not highlighted (reverse background) even though its selected but when the select button is pressed the it is selected and highlighted.
glez about 6 years

Update - The select button works fine now but the same code doesn't select the text when the page loads. I tried putting the focus/select code in a script as the last item on the page also no luck. It seems like the edit field does not get focus before the select is done. I have to click into the edit to get text scanned into it.
glez about 6 years

So apparently it doesn't work by design because Apple doesn't want a developer to control when the keyboard is shown in mobile Safari! A user must first interact with a page before focus() will work is how I read this. Its exactly what I'm trying to avoid. In an industrial setting with a scanner the use case is scan something, see the page. Scan again and the same happens. ugh! medium.com/@brunn/autofocus-in-ios-safari-458215514a5f
Perran Mitchell about 6 years

Well found! I'll add this to the answer incase others need it.