Databases
StackOverflow2013
Postsdbo
POMobile Safari Autofocus text field
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMobile Safari Autofocus text field
    text
    copied!<p>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.</p> <p>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.</p> <p>I've tested in the emulator, and on iPhone 3GS/4 iOS4.</p> <p>Example HTML:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang='en'&gt; &lt;head&gt; &lt;title&gt;Autofocus tests&lt;/title&gt; &lt;meta content='width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0' name='viewport'&gt; &lt;meta content='yes' name='apple-mobile-web-app-capable'&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt; Show keyboard without user focus and select text: &lt;/h1&gt; &lt;p&gt; &lt;button id='focus-test-button'&gt; Should focus on input when you click me after .5 second &lt;/button&gt; &lt;input id='focus-test-input' type='number' value='20'&gt; &lt;/p&gt; &lt;script type="text/javascript"&gt; //&lt;![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); }); //]]&gt; &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>~Similar~ SO questions:</p> <ul> <li><a href="https://stackoverflow.com/questions/3272089/programmatically-selecting-text-in-an-input-field-on-ios-devices-mobile-safari">programmatically-selecting-text-in-an-input-field-on-ios-devices-mobile-safari</a></li> <li><a href="https://stackoverflow.com/questions/5771785/how-can-you-autofocus-on-a-form-field-in-iphone-safari">how-can-you-autofocus-on-a-form-field-in-iphone-safari</a></li> <li><a href="https://stackoverflow.com/questions/2398528/set-textbox-focus-in-mobile-safari/2944649#2944649">Comment in set-textbox-focus-in-mobile-safari</a></li> </ul>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload