DCdaz DCdaz - 2 months ago 17
Javascript Question

IOS disable the keyboard tab arrows

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 comes 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");
});

});




Answer

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');
  }
});