iOS Safari HTML表单下一个/上一个按钮 - 它们如何工作？

Question

免责声明:我正在使用JQuery Mobile.

我有一堆不同形式的页面,但是当按下下一个/上一个按钮时,其中一些页面似乎表现出不同的行为.

所有表单都使用制表符索引进行设置.

Form 1完美运行,除了它跳过JQuery Mobile翻转开关和单选按钮,这不是一个真正的问题,因为它们有点不同.

表单2,使用tabindex="0"焦点设置的元素,$("#myElement").focus();然后禁用下一个按钮,按下前一个按钮将转到表单的底部,即下一个/上一个顺序似乎是1,2,0.

表格3似乎完全不稳定,这次按顺序向下,但是一些字段似乎首先将焦点设置到标签,然后再按下一次导致输入字段被选中.

表单4工作正常,除了最后一个选择字段似乎被忽略.然后tabindex跳转到页面上的一些锚元素,然后继续翻转开关.表单5与表单4具有相同的行为,同样忽略表单中的最后一个选择字段.

我将继续对此进行调查,并制作一个小提琴,但是有没有人遇到过这类问题或对他们应该如何运作有一些了解？

Answer 1

好吧这些都是我的错误,但它可能对某人有所帮助,所以这里就是这样.

下一/上为了确实似乎是直接相关的tabindex属性,没有任何附加条件.

但是对于我的错误,tabindex从1开始不是0. http://www.w3schools.com/tags/att_global_tabindex.asp.因此对于表单2,它从1开始,然后是2,然后是0.

我使用knockoutjs将tabindex属性绑定到$index()表示每个字段和字段值的observableArray项,这使得错误更难以发现.所以我不得不改变它$index() + 1.

对于单选按钮,索引是从选项集合中获取的,而不是父节点,因此我必须使用$parentContext.index() + 1它们(请参阅此处:https://stackoverflow.com/a/11013401/1061602).

尝试使用相同的翻转开关方法似乎没有做任何事情.

完全不稳定的形式是因为在DOM上仍然存在另一种形式,其具有tabindex设置为类似值集的属性,因此它依次在两种形式之间进行制表.对我来说最简单的解决方案是隐藏现有表单,请参阅此处:https://stackoverflow.com/a/5494043/1061602.

表格4和表格5之间的共同点也是它们具有相同的tabindex(6)但是这是一个红鲱鱼.仍在调查Chrome中跳过最后一个选择字段的原因 - 但是在iOS Safari上它按预期工作,因此问题解决了!!