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

Answer 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:

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.

Answer 2

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.