iOS Safari Formulario HTML Botones siguiente / anterior: ¿cómo funcionan?

Descargo de responsabilidad: estoy usando JQuery Mobile.

Tengo un montón de páginas con diferentes forms, pero algunas parecen mostrar un comportamiento diferente al presionar los botones siguiente / anterior.

Los botones siguiente / anterior en el teclado iOS7

Todos los formularios están configurados con índice de tabulación.

El formulario 1 funciona perfectamente, excepto que omite los conmutadores de flip JQuery Mobile y los botones de opción, lo cual no es realmente un problema, ya que son un poco diferentes.

Forma 2, el elemento con tabindex="0" tiene el foco establecido usando $("#myElement").focus(); y luego el button siguiente está deshabilitado y presionando el button anterior va al final del formulario, es decir, el order siguiente / anterior parece ser 1, 2, 0.

El formulario 3 parece ser completamente errático, esta vez va hacia abajo en order, pero algunos campos parecen estar enfocando primero la label, luego presionando nuevamente hace que se select el campo de input.

El formulario 4 funciona bien, aparte del último campo de selección que parece ignorarse. A continuación, el tabindex salta a algunos elementos de anclaje en la página antes de continuar con los conmutadores. El formulario 5 tiene el mismo comportamiento que el formulario 4, de nuevo se ignora el último campo de selección en el formulario.

Seguiré investigando esto y produciré un violín, pero ¿alguien ha experimentado este tipo de problemas o tiene alguna idea de cómo deberían funcionar?

Bien, todos estos son mis errores pero podría ayudar a alguien, así que aquí va.

El order siguiente / anterior parece estar directamente relacionado con el atributo tabindex , sin condiciones.

Sin embargo, a mi error, tabindex comienza en 1 no 0. http://www.w3schools.com/tags/att_global_tabindex.asp . Entonces, para el Formulario 2, comenzó en 1, luego en 2, luego en 0.

Estaba usando knockoutjs para enlazar el atributo tabindex al $index() de un elemento observableArray que representaba cada campo y valor de campo, lo que hacía que el error fuera más difícil de detectar. Así que tuve que cambiarlo a $index() + 1 .

Para los botones de radio, el índice se tomaba de la colección de opciones, no del padre, así que tuve que usar $parentContext.index() + 1 para ellos (ver aquí: https://stackoverflow.com/a/11013401 / 1061602 ).

Intentar el mismo enfoque para los interruptores no parece hacer nada.

La forma completamente errática se debía a que todavía existía otra forma en el DOM que tenía attributes de tabindex establecidos en un set similar de valores, por lo que se tabulaba entre las dos forms sucesivamente. La solución más fácil para mí fue ocultar el formulario existente, ver aquí: https://stackoverflow.com/a/5494043/1061602 .

La similitud entre la Forma 4 y la Forma 5 fue también que tenían el mismo tabindex (6), sin embargo, esto era un arenque rojo. Aún investigando por qué se omite el último campo de selección en Chrome; sin embargo, en iOS Safari funciona como se espera, ¡así que los problemas se resuelven!