Organizational Research By

Surprising Reserch Topic

mobile safari autofocus text field


mobile safari autofocus text field  using -'javascript,focus,mobile-safari,autofocus'

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:


programmatically-selecting-text-in-an-input-field-on-ios-devices-mobile-safari
how-can-you-autofocus-on-a-form-field-in-iphone-safari
Comment in set-textbox-focus-in-mobile-safari

    
asked Sep 8, 2015 by rajesh
0 votes
7 views



Related Hot Questions



Government Jobs Opening


...