20

As part of my login and registration forms, if there are errors then it will autofocus the related field. Actually, it not as simple as I thought. Let me try to explain!

Basically, on this project, pages are loaded with AJAX. Forms may include an autofocus attribute. This works great, but on mobile it just shows the cursor without bringing up the keyboard, meaning you still have to tap the input to start typing.

Am I missing something, or do I have to double-up the focussing with something like 

document.querySelector("[autofocus]").focus();
// with appropriate verification that the element exists, of coursr
Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592

1 Answers1

10

In mobile devices (at least in Apple's Safari), the keyboard isn't allowed to show up without the user clicking on the input field. It's by design, and I don't think there is much you can do about it.

http://www.quora.com/Mobile-Safari-iPhone-or-iPad-with-Javascript-how-can-I-launch-the-on-screen-keyboard

Tarun
  • 631
  • 7
  • 19
  • 1
    I don't think this is 100% true, I have a site with a dropdown menu containing an input, and when the dropdown is opened it calls `.focus()` on the input. When I open the dropdown in Safari on my iPad 2 it brings up the keyboard automatically, before I click on the input. – Andy Jul 08 '15 at 21:58
  • 2
    It's not clear, but the quora link does hint that the problem is that automatic events (such as onload, ready, etc) all fail to display the keyboard on focus() - anything that's triggered from a user event though, like onclick etc, if they then call focus() it does show the keyboard. – Jon Marnock Mar 29 '16 at 01:57
  • 2
    It's not that the user has to click on the actual input for it work, it's that the user has to *interact* with the page, which I suspect means generating any event – Mario Gil Jan 25 '19 at 16:02