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

Question

免责声明：我正在使用JQuery Mobile。

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

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

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

表单2，tabindex="0"的元素使用$("#myElement").focus();将焦点设置为它，然后禁用下一个按钮，按下前一个按钮将转到表单的底部，即下一个/ prev顺序似乎是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属性绑定到表示每个字段和字段值的observableArray项的$index()，这使错误更难发现。所以我不得不将其更改为$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上它按预期工作，所以问题解决了！

Answer 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>