IOS 禁用键盘标签箭头

Question

我需要使用 JavaScript 禁用 IOS 上的键盘选项卡箭头，甚至需要使用基于 Web 的应用元标记（如果有的话）。

我已经尝试了一些选项，但在 select 菜单方面遇到了运行问题。

我也无法将所有 tabindex 恢复为 -1，因为这会损害桌面和其他设备上的 tab 功能。

如有任何帮助，我们将不胜感激。

这是我对跳转到只读的字段所做的示例。

$(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 1

这个问题无法通过设置 html 属性、元标记或监听特殊事件（这些箭头没有事件...）来解决。

唯一的选择是当一个输入被聚焦时禁用表单中的所有其他输入，这样就没有可以切换到的输入。

不是编写此代码并重新发明轮子，这里是 link 到 jquery 已经这样做的模块：https://github.com/ChrisWren/touch-input-nav

如果您想要纯 js 解决方案，请查看：https://github.com/ChrisWren/touch-input-nav/blob/master/touch-input-nav.js 没有那么多代码需要重写，所以这应该不是问题。

Answer 2

我实际上找到了一种很有效的方法。

我正在做的是仅检测 IOS 设备，然后禁用输入字段的 Tab 键。

我想我可以更进一步检测 IOS 和 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');
  }
});

IOS 禁用键盘标签箭头

IOS disable the keyboard tab arrows

javascript

jquery

mobile-safari