问题:

So I have a form wizard that exists in a slider. The whole idea is to gate people based on their decisions. The problem is the ipad. On the iPad it allows you to hit [previous|next] to move through fields on the form, and this breaks the gating strategy.

On desktop browsers I suppressed the TAB key by returning false on keypress on gated fields. But on the iPad I see no solution.

I've tried tabindex and set gated inputs to -1. The problem here is that after they move through the gate the [previous|next] buttons reactive and mess everything up.

Is there a way I can remove those buttons all together? Or capture them as a js event?

(NOTE this is a mobile web page, not an app)

回答1:

The way I solved this problem was to disable and set visibility: hidden on any form elements that the user should not be able to tab to. This is a pain in the ass, but it works well on iOS 5.

回答2:

You can use touch-input-nav.js to automatically disable input fields that aren't contained in the same form as the control that currently has focus. This is essentially an automated way of doing Ben's solution. Found via this answer.

回答3:

You can capture onfocus and onblur events of your various elements, and have some logic decide if allowed or not, depending on your needs. The result would be pressing "Next" and remaining in place.