iOS Safari HTML form next/previous buttons - how do they work?

Question

Disclaimer: I am using JQuery Mobile.

I have a bunch of pages with different forms on, but some of them seem to exhibit different behaviour when pressing the next/previous buttons.

All forms are set up with tab index.

Form 1 works perfectly, except it skips the JQuery Mobile flip switches and radio buttons, which isn't really a problem as they are a bit different.

Form 2, the element with tabindex="0" has focus set to it using $("#myElement").focus(); and then the next button is disabled, and pressing the previous button goes to the bottom of the form, i.e. the next/prev order seems to be 1, 2, 0.

Form 3 seems to be completely erratic, this time going downwards in order but some fields seem to be setting the focus to the label first, then pressing next again causes the input field to be selected.

Form 4 works fine, apart from the last select field seems to be ignored. Then the tabindex jumps to some anchor elements on the page before continuing to the flip switches. Form 5 has the same behaviour as Form 4, again the last select field in the form is ignored.

I will continue to investigate this, and produce a fiddle, but has anyone experienced these kind of issues or has some insight into how they should work?

Answer 1

OK all these are my errors but it might help someone, so here goes.

The next/previous order does seem to be directly related to the tabindex attribute, with no strings attached.

However to my error, tabindex starts at 1 not 0. http://www.w3schools.com/tags/att_global_tabindex.asp. So for Form 2, it started at 1, then 2, then 0.

I was using knockoutjs to bind the tabindex attribute to the $index() of an observableArray item that represented each field and field value, which made the error harder to spot. So I had to change it to $index() + 1.

For the radio buttons, the index was being taken from the collection of options, not the parent, so I had to use $parentContext.index() + 1 for those (see here: https://stackoverflow.com/a/11013401/1061602).

Attempting the same approach for flip switches doesn't seem to do anything.

The completely erratic form was because there was another form still existing on the DOM that had tabindex attributes set to a similar set of values, so it is tabbing between the two forms in turn. The easiest solution for me was to hide the existing form, see here: https://stackoverflow.com/a/5494043/1061602.

The commonality between Form 4 and Form 5 was also that they had the same tabindex (6) however this was a red herring. Still investigating why the last select field is skipped in Chrome - however on iOS Safari it works as expected, so problems solved!!

Answer 2

At least for Firefox/Chrome, you can use mozactionhint:

<input name="foo" tabindex="1" mozactionhint="Next"> // will go to next: "bar"
<input name="bar" tabindex="2" mozactionhint="Next"> // will submit the form
<input type="submit" tabindex="3">Submit</input>