I need to disable the keyboard tab arrows on IOS using JavaScript or even an web based app meta tag if there is one.

I have tried a few options but have ran into issues when it es to select menus.

I also cannot revert all of the tabindex's to -1 because this damages tab-ability on a desktop and other devices.

Any help would be appreciated.

This is an excample of what I done for the fields jumping to readonly.

$(document).ready(function() {

  $('input, textarea, select').on('focus', function() {
    $('input, textarea').not(this).attr('readonly', 'readonly');
    $('select').not(this).attr("disabled", "disabled");
  });

  $('input, textarea, select').on('blur', function() {
    $('input, textarea').removeAttr("readonly");
    $('select').removeAttr("disabled");
  });

});

I need to disable the keyboard tab arrows on IOS using JavaScript or even an web based app meta tag if there is one.

I have tried a few options but have ran into issues when it es to select menus.

I also cannot revert all of the tabindex's to -1 because this damages tab-ability on a desktop and other devices.

Any help would be appreciated.

This is an excample of what I done for the fields jumping to readonly.

$(document).ready(function() {

  $('input, textarea, select').on('focus', function() {
    $('input, textarea').not(this).attr('readonly', 'readonly');
    $('select').not(this).attr("disabled", "disabled");
  });

  $('input, textarea, select').on('blur', function() {
    $('input, textarea').removeAttr("readonly");
    $('select').removeAttr("disabled");
  });

});

• javascript
• jquery
• mobile-safari

• Have you troubles with this in mobile safari? – pedrouan Commented Sep 23, 2016 at 17:50
• @pedrouan Yes mate. – user4563161 Commented Sep 23, 2016 at 19:03

2 Answers 2

I actually found a way to do this that works quite while.

What i'm doing is detecting IOS only devices and then disabling the tabbing to input fields.

I suppose I could go a step further and detect IOS and safari.

$(document).ready(function() {
  // Detect IOS
  if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {

    // Only active input fields in use
    $('input, textarea').on('focus', function() {
      $('input, textarea').not(this).attr("readonly", "readonly");
    });
    $('input, textarea').on('blur', function() {
      $('input, textarea').removeAttr("readonly");
    });

    // Disable tabing to select box's
    $('select').attr('tabindex', '-1');
  }
});

This is an issue that can't be solved by setting a html attribute, meta tag or listening to special events(there is no event for those arrows...).

The only option is to disable all other inputs in the form when a input is focused so that there is no input to tab to.

Instead of writing this code and reinventing the wheel, here's a link to a jquery module that already does this: https://github./ChrisWren/touch-input-nav

If you want a pure js solution, have a look at: https://github./ChrisWren/touch-input-nav/blob/master/touch-input-nav.js there isn't that much code that needs rewriting so that shouldn't be an issue.