在移动版Safari中禁用“上一页”和“下一页”按钮

Question

在移动Safari中聚焦于输入字段时，是否可以禁用“下一个”和“上一个”按钮？我一直在尝试设置所有字段为 readonly="readonly" 并在聚焦/失焦时删除/重新应用属性的方法。它对某些字段有效，但并非所有字段都有效。在某些情况下，它感觉有点hacky/buggy。我能否通用地禁用上一个和下一个控件？这是针对iPad Web应用程序的，因此无障碍性不是问题。

- Jezen Thomas

---

你这样做的目的是什么？我倾向于认为改变或破坏预期的浏览器功能是一件不好的事情。 - Surreal Dreams

就像我之前所说的，这是一个iPad网页应用程序。它只会以那种方式使用。我有一个跨越页面上多个div的表单，每个div占据整个视口。它们通过serialScroll连接，而Mobile Safari的“previous”和“next”表单控件正在破坏布局/滚动功能。 - Jezen Thomas

此外，据我所知，“下一个”按钮存在问题。如果您正在动态填充级联下拉菜单，并且需要使用onchange来进行填充（例如汽车品牌/汽车型号/汽车款式），那么它将无法正常工作。以下下拉菜单已过时。因此，我也想禁用该功能，让浏览器像普通浏览器一样运行。 - iJames

这个解决方案也许可以帮助解决这个问题：https://dev59.com/ClfUa4cB1Zd3GeqPGk13 - iJames

Jezen：你的解决方案是一个非常有趣的黑客技巧！它有可能起作用，但我想把每个选择/输入都恢复到禁用它们之前的状态。此外，我发现上面的版本并不完美，会锁定我无法输入文本，并且不能安全地重新激活控件...但这是一个不错的开始！ - iJames

Answer 1

我目前最好的解决方案（基于Jezen Thomas的解决方案）是在和上设置<code>readonly</code>，在<select>上设置<code>disabled</code>，并在<code>blur</code>时将它们移除：</p> <pre class="guess-JavaScript"><code>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"); }); </code></pre> <p>唯一的缺陷是，你需要放弃焦点（例如点击背景）才能从 <code>input</code> / <code>textarea</code> 切换到 select。但是你可以轻松地在 <code>input</code> 和 <code>textarea</code> 之间切换焦点。</p>

- Setthase

---

我也在IOS 7上使用过这个，直到我尝试重写我的JQuery动态下拉脚本以便在这个操作系统上正常工作。 - Progrower

你能在本地通过Xcode模拟器测试吗，@codename？我已经运行了这段代码片段，但似乎它并没有起作用。 - mcclaskiem

@mcclaskiem 没有，我没有使用“iOS模拟器” - 那时在真机上测试... 我不确定是否仍适用于iOS 8或9（其他评论说对iOS7没问题）。但从我的经验来看，iOS模拟器并不总是像真实设备一样工作 - 不幸的是... - Setthase

@codename- 嗯，我似乎无法在iOS 8或9上找到可行的解决方案 :/ - mcclaskiem

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'，因为它会在'focus'之前被触发。在失焦时，我会重新启用输入和选择字段。

希望这个答案有所帮助。

- Jaganaath Jayakumar

Answer 3

这是带有 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>

- Progrower

Answer 4

我个人没有测试过，但也许可以尝试使用disabled而不是readonly。

只读 - 只读字段无法修改。但是，用户可以通过Tab键到达它，将其突出显示并从中复制文本。

禁用 - 禁用的输入元素无法使用和单击。

也许这就是你需要的区别？

- DACrosby