Search code examples
javascripthtmliphoneipad

Auto Focus Form Element on iPhone/iPad


I'm trying to create a web application that automatically focuses the text input box upon page load.

However, I know that the 'autofocus' attribute isn't supported in mobile safari. The reason I need it to autofocus is because I am developing a web application so to say, and it basically requires the user to use their bluetooth scanner to send input to a PHP page that then POSTs that data (and hence, leaves the page briefly). Upon return, I wish for the box to be focused again, ready for the next scan. And as you may have guessed, my client wishes to use an iPad/iPhone.

The input is essentially just a keyboard wedge, a series of keyboard strokes will be sent wherever the focus is.

I've tried using the JavaScript and jQuery code below to no avail;

$( document ).ready(function() {
  $( "#scan-input" ).focus();
});

Didn't work. And;

function formfocus() {
    document.getElementById('scan-input').focus();
}
window.onload = formfocus;

Didn't work either when placed at the bottom of the page(s).

I've tried searching for this problem and found; How can you autofocus on a form field in iPhone Safari?

But there wasn't any helpful information returned either.

Now when I use the JavaScript and jQuery code posted above, it does infact work on my web browsers but again, not on the iPad or iPhone (I'm using an iPhone for testing with an incognito window each time to clear cache as a precaution).

Does anyone know a way to force the focus to a text input box on iPad/iPhone?


Solution

  • For usability reasons all the focus() functions are ignored by Safari in iPhone/iPad for usability reasons

    Quora