Disabling Previous and Next buttons in Mobile Safari

Question

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

Answer 1

I haven't personally tested this, but perhaps try disabled instead of 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?

Answer 2

Here's the same script with the IOS detection.

 <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 3

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.

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.

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.

Hope this answer helps.

Answer 4

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:

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.