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

Is it possible to disable the 'next' and 'previous' buttons in Mobile Safari when focused on an input field? I've been trying the method of setting all fields to readonly="readonly" and removing/reapplying the attribute on focus/blur respectively. It works for some fields, but not for all. In some cases, it feels rather hacky/buggy. Can I universally disable the previous and next controls? This is for an iPad web app, so accessibility is not an issue.

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

4 个解决方案

#1

So far the best solution for me (based on Jezen Thomas solution) is to set on focus readonly to inputs and textareas and disabled to selects, and remove them on blur:

到目前为止,对我来说最好的解决方案(基于Jezen Thomas解决方案)是将焦点设置为仅读取输入和textareas,禁用以选择,并在模糊时删除它们:

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

Only one flaw is that you need to drop focus (for example clicking on background) before changing from input / textarea to select. But you can easily change your focus between inputs and textareas.

在从输入/文本区域更改为选择之前,只需要丢弃一个缺点(例如,单击背景)。但您可以轻松地改变输入和textareas之间的焦点。

#2

I haven't personally tested this, but perhaps try disabled instead of readonly.

我没有亲自测试过这个,但也许尝试禁用而不是readonly。

Readonly - A read-only field cannot be modified. However, a user can tab to it, highlight it, and copy the text from it.

只读 - 无法修改只读字段。但是,用户可以选中它,突出显示它,然后从中复制文本。

Disabled - A disabled input element is unusable and un-clickable.

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

Maybe this is the difference you need?

也许这就是你需要的差异?

#3

Here's the same script with the IOS detection.

这是与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>

#4

I could see that this ticket is an old one, but the above proposed answer doesn't work for me as iPhone opens the select options list before the focus event is called. So I have used the below code and it worked like charm for me.

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

My working solution for this:

我的工作解决方案:

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

This solution disables prev and next buttons in iPhone. If you want to change the selectors targeting only the specific input elements, you just need to modify it in the above code.

此解决方案禁用iPhone中的prev和next按钮。如果要更改仅针对特定输入元素的选择器,只需在上面的代码中对其进行修改即可。

I'm targeting only iPhone (may be you can use different condition to test if it's iphone or not). Used 'touchstart' as it gets triggered before the 'focus'. On blur, I'm enabling the input & select fields back.

我只针对iPhone(可能你可以使用不同的条件来测试它是否是iphone)。使用'touchstart',因为它在'焦点'之前被触发。在模糊时,我正在启用输入和选择字段。

Hope this answer helps.

希望这个答案有所帮助

#1