Отключение кнопок Previous и Next в Mobile Safari

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

Ответ 1

Пока лучшее решение для меня (на основе решения Jezen Thomas) должно установить на focus readonly на input и textarea и 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 s.

Ответ 2

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

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

Disabled - отключенный элемент ввода непригоден и не требует клика.

Возможно, это разница, в которой вы нуждаетесь?

Ответ 3

Здесь же script с обнаружением 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

Я мог видеть, что этот билет старый, но предложенный выше ответ не работает для меня, так как 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');
        });
    }

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

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

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