禁用 Mobile Safari 中的“上一个”和“下一个”按钮

Question

当焦点位于输入字段时，是否可以禁用 Mobile Safari 中的“下一个”和“上一个”按钮？我一直在尝试将所有字段设置为 readonly="readonly" 并分别删除/重新应用焦点/模糊属性的方法。它适用于某些领域，但不适用于所有领域。在某些情况下，感觉相当hacky/buggy。我可以普遍禁用上一个和下一个控件吗？这是针对 iPad 网络应用程序的，因此可访问性不是问题。

Answer 1

到目前为止，对我来说最好的解决方案（基于 Jezen Thomas 解决方案）是将 focus readonly 设置为 input和 textarea 以及 disabled 到 select，并在 blur 上删除它们：

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

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

只有一个缺陷是您在更改之前需要放弃焦点（例如单击背景） input / textarea 进行选择。但您可以轻松地在 input 和 textarea 之间更改焦点。

Answer 2

我可以看到这张票是旧票，但上面建议的答案对我不起作用，因为 iPhone 在调用焦点事件之前打开选择选项列表。所以我使用了下面的代码，它对我来说很有魅力。

我的工作解决方案：

if (navigator.userAgent.toLowerCase().indexOf("iphone") ==-1) {
    }else{
        $(document).on('touchstart', 'input, select', function() {
            $('select, input').not(this).attr('disabled', 'disabled');
        }).on('blur', 'input, select', function() {
            $('input, select').removeAttr('disabled');
        });
    }

此解决方案禁用 iPhone 中的上一个和下一个按钮。如果您想更改仅针对特定输入元素的选择器，您只需在上面的代码中进行修改即可。

我只针对iPhone（也许你可以使用不同的条件来测试它是否是iPhone）。使用“touchstart”，因为它在“焦点”之前触发。在模糊时，我启用输入和返回选择字段。

希望这个答案有帮助。

Answer 3

我还没有亲自测试过这一点，但也许可以尝试使用 disabled 而不是 readonly。

只读 -
无法修改只读字段。但是，用户可以使用 Tab 键选中它、突出显示它并从中复制文本。

禁用 - 禁用的输入元素无法使用且不可点击。

也许这就是您需要的差异？

Answer 4

这是与 IOS 检测相同的脚本。

 <script>
   var device = navigator.userAgent.toLowerCase();

   var ios = device.match(/OS 7(_\d)+ like Mac OS X/i);

  if (ios) {
     $(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");
       });

     });

   }
  </script>