IOS Safari HTML-форма следующая/предыдущая кнопка - как они работают?

Отказ от ответственности: я использую JQuery Mobile.

У меня есть куча страниц с разными формами, но некоторые из них, похоже, проявляют различное поведение при нажатии следующих/предыдущих кнопок.

Форма 1 работает отлично, за исключением того, что она пропускает переключатели JQuery Mobile и переключатели, что не является проблемой, так как они немного отличаются.

Форма 2, элемент с tabindex="0" имеет фокус, установленный для него с помощью $("#myElement").focus();, а затем следующая кнопка отключена, а нажатие предыдущей кнопки переходит к нижней части формы, то есть следующий порядок /1, 2, 0.

Форма 3 выглядит совершенно неустойчивой, на этот раз она идет вниз по порядку, но некоторые поля, похоже, сначала устанавливают фокус на метку, а затем снова нажатие на кнопку приводит к выбору поля ввода.

Форма 4 работает нормально, кроме последнего поля выбора, кажется, игнорируется. Затем tabindex переходит к некоторым элементам привязки на странице, прежде чем переходить к переключателям переключения. Форма 5 имеет такое же поведение, как и форма 4, снова игнорируется последнее поле выбора в форме.

Я продолжу расследовать это и выпустить скрипку, но кто-нибудь испытал такие проблемы или получил некоторое представление о том, как они должны работать?

Ответы

Ответ 1

ОК, все это мои ошибки, но это может помочь кому-то, поэтому здесь идет.

Следующий/предыдущий порядок, по-видимому, напрямую связан с атрибутом tabindex без привязки строк.

Однако к моей ошибке tabindex начинается с 1 не 0. http://www.w3schools.com/tags/att_global_tabindex.asp. Итак, для формы 2 она начиналась с 1, затем 2, затем 0.

Я использовал knockoutjs для привязки атрибута tabindex к $index() элемента наблюдаемогоArray, который представлял каждое поле и значение поля, что затрудняло обнаружение ошибки. Поэтому мне пришлось изменить его на $index() + 1.

Для переключателей индекс был выбран из набора опций, а не для родителя, поэтому мне пришлось использовать $parentContext.index() + 1 для них (см. здесь: fooobar.com/questions/70707/...).

Попытка того же подхода для переключателей переворота ничего не делает.

Полностью беспорядочная форма заключалась в том, что в DOM существовала еще одна форма, которая имела атрибуты tabindex, заданные для аналогичного набора значений, поэтому она поочередно перемещается между двумя формами. Самое легкое решение для меня заключалось в том, чтобы скрыть существующую форму, см. Здесь: fooobar.com/questions/396441/....

Общность между формой 4 и формой 5 также заключалась в том, что у них был тот же tabindex (6), однако это была красная селедка. Все еще исследуя, почему последнее поле выбора пропускается в Chrome, однако на iOS Safari он работает так, как ожидалось, поэтому проблемы решены.

Ответ 2

По крайней мере, для Firefox/Chrome, вы можете использовать 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>