Отключение кнопок «Предыдущий» и «Следующий» в Mobile Safari

Question

Можно ли отключить кнопки «следующий» и «предыдущий» в Mobile Safari, когда они сфокусированы на поле ввода? Я пробовал метод установки всех полей на readonly="readonly" и удаления / повторного применения атрибута на фокус / размытие соответственно. Это работает для некоторых полей, но не для всех. В некоторых случаях это выглядит довольно хаки / глючит. Могу ли я повсеместно отключить предыдущий и следующий элементы управления? Это для веб-приложения для iPad, поэтому доступность не является проблемой.

Answer 1

На данный момент лучшее решение для меня (на основе решения Jezen Thomas ) состоит в том, чтобы установить focus readonly на input s и textarea s и disabled на select s, и удалите их на 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 открывает список опций выбора до вызова события focus.Поэтому я использовал приведенный ниже код, и он работал для меня как шарм.

Мое рабочее решение для этого:

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

Это решение отключает кнопки prev и next вiPhone.Если вы хотите изменить селекторы, нацеленные только на определенные элементы ввода, вам просто нужно изменить его в приведенном выше коде.

Я нацеливаюсь только на iPhone (возможно, вы можете использовать другое условие для проверки, если это iphoneили нет).Используется «touchstart», так как он срабатывает перед «фокусом».При размытии я включаю поля ввода и выбора обратно.

Надеюсь, этот ответ поможет.

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>

Answer 4

Я лично не проверял это, но, возможно, попробуйте disabled вместо readonly.

Только чтение - Поле только для чтения не может быть изменено. Однако пользователь может перейти к нему, выделить его и скопировать с него текст.

Отключено - Отключенный элемент ввода недоступен и не активируется.

Может быть, это та разница, которая вам нужна?