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

Posted 2021-04-05

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

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

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

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

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

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

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

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

答案

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

下一个/上一个订单似乎与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上它按预期工作，因此问题解决了!!

另一答案

至少对于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>