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.

What's your purpose in doing this? I tend to think of altering or breaking expected browser functionality as being a bad thing. — Surreal Dreams, Sep 19 '11 at 14:28
As I said, it's an iPad web app. It's only ever going to be used in that fashion. I have a form that spans several divs on the page, and each div occupies the entire viewport. They are connected with serialScroll, and Mobile Safari's 'previous' and 'next' form controls are breaking the layout/scroll functionality. — Jezen Thomas, Sep 19 '11 at 14:34
Additionally, from what I can tell, there is a problem with the "next" button. If you are dynamically populating cascading drop-downs, and you require the onchange to do the populating (as in car makes/car models/car styles then it doesn't work right. The following pulldowns are stale. So I too would like to disable the function and let the browser behave as a normal browser would. — iJames, Oct 13 '11 at 17:52
Note: This "Next" meta-ui issue happens at least on Mobile Safari iOS 4 and iOS 5. — iJames, Oct 13 '11 at 20:27
My web app went into production and I never found an ideal solution. I managed to disable the next/previous functions by disabling all other input elements on input focus, and reenabling them on input blur. The readonly attribute doesn't really work. — Jezen Thomas, Oct 14 '11 at 11:48
I am running into the same issue. Can you expand on "disabling all other input elements". Do you mean you set all of them to readonly? — Allen, Oct 25 '11 at 21:52
I set them to disabled. The readonly attribute doesn't take them out of the tab index. Here is the gist of it: `$(document).ready(function(){$('#screen').not(this).click(function(){$(this).blur()});$('#klarjurist, #kuber').focus(function(){$('input, select').not(this).attr("disabled","disabled")});$('#inputname, #inputemail, #inputtel').focus(function(){$('input, select').not('#inputname, #inputemail, #inputtel').attr("disabled","disabled")});$('input').blur(function(){$('input, select').removeAttr("disabled")})});` — Jezen Thomas, Oct 26 '11 at 06:33
To make the code easier to read, copy and paste it here: http://jsbeautifier.org/ — Jezen Thomas, Oct 26 '11 at 06:40
This solution might help with this issue too: http://stackoverflow.com/questions/6038403/next-in-the-dropdown-on-iphone-safari-does-not-trigger-on-change-event — iJames, Nov 09 '11 at 20:22
Jezen: Your solution is quite an interesting hack! It has the potential for working but I would want to restore each select/input back to the state it was before disabling them all. Also I've found the version above to not work perfectly, locking me out of typing text and not safely reactivating controls... But a good start! — iJames, Nov 09 '11 at 20:40
Actually the solution from @JezenThomas doesn't work on my iPad 2 (iOS 5.0.1) – even if I disable all fields (in HTML or using JavaScript), disabled Previous/Next buttons do appear at the bottom of the screen. — akaihola, Mar 19 '12 at 09:32
They can't be removed from the UI (AFAIK). However, if a a field has no editable siblings, the prev/next buttons should be greyed out, or will grey themselves out when the user touches them. — Jezen Thomas, Mar 19 '12 at 10:04
And what about stop fighting the buttons, forget disabling them and use something like jQuery History plug-in to build yourself a working history path for the prev/next buttons to properly scroll instead? — Petr Vostrel, Mar 20 '12 at 23:45

score 6 · Answer 1 · answered Aug 16 '13 at 12:28

6

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.

answered Aug 16 '13 at 12:28

Setthase

13,988
2
27
30

I also used this with IOS 7 until I can try to rewrite my JQuery dynamic drop down scripts to work correctly on this OS. – Progrower Jan 05 '14 at 16:02
Were you able to test this locally @codename- via the simulator in xcode? I have this snippet running but it doesnt seem to work. – mcclaskiem Nov 30 '15 at 19:59
@mcclaskiem no, I haven't used "iOS Simulator" - tested on real device on that time... I'm not really sure if this is still valid for iOS 8 or 9 (other comments say it's okay for iOS7). But from my experience iOS Simulator not always work like real device - unfortunately... – Setthase Dec 01 '15 at 12:55
@codename- ya I cant seem to get working solution on iOS 8 or 9 :/ – mcclaskiem Dec 01 '15 at 16:57

score 2 · Answer 2 · answered Aug 26 '16 at 01:23

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.

score 1 · Answer 3 · answered Jan 05 '14 at 16:09

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>

score 1 · Answer 4 · answered Mar 31 '12 at 01:55

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?

Disabling Previous and Next buttons in Mobile Safari

4 Answers4

Linked