Programmatically focus on next input field in mobile safari

by

I found a workaround that might work for you.

Apparently IOS/Safari only “accepts” the focus when inside a touch event handler. I triggered a touch event and inserted the .focus() inside it. I tried this on my iPhone3S and iPhone5S with Safari and it works:

var focused = $('input:first'); //this is just to have a starting point

$('button').on('click', function () { // trigger touch on element to set focus
    focused.next('input').trigger('touchstart'); // trigger touchstart
});

$('input').on('touchstart', function () {
    $(this).focus();   // inside this function the focus works
    focused = $(this); // to point to currently focused
});

Demo here
(press next button in demo)

More Related Contents:

  1. Simplest way to detect a pinch
  2. Is Safari on iOS 6 caching $.ajax results?
  3. Mobile Safari Autofocus text field
  4. Force link to open in mobile safari from a web app with javascript
  5. How to open a native iOS app from a web app
  6. iOS 8 removed “minimal-ui” viewport property, are there other “soft fullscreen” solutions?
  7. Mobile Safari: Javascript focus() method on inputfield only works with click?
  8. Copy to clipboard using Javascript in iOS
  9. Is there any way to use window.onbeforeunload on Mobile Safari for iOS devices?
  10. jQuery live scroll event on mobile (work around)
  11. How to focus on a form input text field on page load using jQuery?
  12. How to detect in iOS webapp when switching back to Safari from background?
  13. Preventing default context menu on longpress / longclick in mobile Safari (iPad / iPhone)
  14. Detect which form input has focus using JavaScript or jQuery
  15. focus() not working in safari or chrome
  16. Cancel single image request in html5 browsers
  17. ‘pageshow’ is not received when pressing “back” button on Safari on *IPad”
  18. How to scroll to an element in jQuery?
  19. Twitter bootstrap – Focus on textarea inside a modal on click
  20. Prevent iOS bounce without disabling scroll ability
  21. How to open Safari from a WebApp in iOS 7
  22. Detect if page is loaded inside WKWebView in JavaScript
  23. Is it possible, in JavaScript, to detect when the screen is turned off in the Android & iOS browsers
  24. iOS 11 getUserMedia not working?
  25. How to focus an input field on Android browser through javascript or jquery
  26. Is there an alternative method to use onbeforeunload in mobile safari?
  27. toggle show/hide div with button?
  28. Dynamically loading css stylesheet doesn’t work on IE
  29. How can I detect whether an iframe is loaded?
  30. How can I change the default width of a Twitter Bootstrap modal box?

Leave a Comment