iOS Safari HTML表格下一个/上一个按钮 - 它们是如何工作的？ [英] iOS Safari HTML form next/previous buttons - how do they work?
问题描述
免责声明：我正在使用JQuery Mobile。
我有许多不同形式的页面，但其中一些在按下下一页时显示出不同的行为/ previous buttons。
所有表单都使用tab索引设置。
表单1完美地工作，除了跳过JQuery Mobile翻转开关和单选按钮，因为它们有点不同，所以这不是真正的问题。
表单2，元素包含 tabindex =0使用 $（＃myElement）。focus（）; 设置焦点，然后下一个按钮被禁用，然后按下上一个按钮到窗体的底部，即下一个/上一个命令似乎是1,2,0。
表单3似乎是完全的不稳定的，这次按顺序向下，但有些领域似乎首先把重点放在标签上，然后按下a增益会导致输入字段被选中。
表单4工作正常，除了最后一个选择字段似乎被忽略。然后，tabindex在继续翻转开关之前跳转到页面上的一些锚点元素。
表单5与表单4具有相同的行为，同样也忽略了表单中最后一个选择字段。
我将继续调查此问题，并生成一个小提琴，但有任何人遇到过这类问题或有一些洞察到他们应该如何工作？
好的，这些都是我的错误，但它可能有助于某人，所以在这里。
下一个/上一个命令确实似乎与<$ c $直接相关c> tabindex 属性，没有附加任何字符串。
然而，对于我的错误， tabindex 从1开始不是0. http://www.w3schools.com/tags/att_global_tabindex.asp 。所以对于Form 2，它从1开始，然后是2，然后是0。
我使用knockoutjs来绑定 tabindex 属性为表示每个字段和字段值的observableArray项目的 $ index（），这使得错误难以找到。所以我不得不将它改为 $ index（）+ 1 。
对于单选按钮，索引是从选项集合中取出，而不是父类，所以我不得不为这些选项使用 $ parentContext.index（）+ 1 （请参阅：）。
完全不稳定的形式是因为DOM上还存在另一种形式，其中 tabindex 属性设置为一组类似的值，因此它依次在两个表单之间进行切换。对我而言，最简单的解决方案是隐藏现有表单，请参阅： https://stackoverflow.com/a/5494043/1061602。
表格4和表格5之间的通用性也是它们具有相同的tabindex（6），但是这是一条红色鲱鱼。仍然在调查为什么最后一个选择字段在Chrome中被跳过 - 但是在iOS Safari中，它按预期工作，所以问题解决了！
Disclaimer: I am using JQuery Mobile.
I have a bunch of pages with different forms on, but some of them seem to exhibit different behaviour when pressing the next/previous buttons.
All forms are set up with tab index.
Form 1 works perfectly, except it skips the JQuery Mobile flip switches and radio buttons, which isn't really a problem as they are a bit different.
Form 2, the element with tabindex="0" has focus set to it using $("#myElement").focus(); and then the next button is disabled, and pressing the previous button goes to the bottom of the form, i.e. the next/prev order seems to be 1, 2, 0.
Form 3 seems to be completely erratic, this time going downwards in order but some fields seem to be setting the focus to the label first, then pressing next again causes the input field to be selected.
Form 4 works fine, apart from the last select field seems to be ignored. Then the tabindex jumps to some anchor elements on the page before continuing to the flip switches. Form 5 has the same behaviour as Form 4, again the last select field in the form is ignored.
I will continue to investigate this, and produce a fiddle, but has anyone experienced these kind of issues or has some insight into how they should work?
OK all these are my errors but it might help someone, so here goes.
The next/previous order does seem to be directly related to the tabindex attribute, with no strings attached.
However to my error, tabindex starts at 1 not 0. http://www.w3schools.com/tags/att_global_tabindex.asp. So for Form 2, it started at 1, then 2, then 0.
I was using knockoutjs to bind the tabindex attribute to the $index() of an observableArray item that represented each field and field value, which made the error harder to spot. So I had to change it to $index() + 1.
For the radio buttons, the index was being taken from the collection of options, not the parent, so I had to use $parentContext.index() + 1 for those (see here: https://stackoverflow.com/a/11013401/1061602).
Attempting the same approach for flip switches doesn't seem to do anything.
The completely erratic form was because there was another form still existing on the DOM that had tabindex attributes set to a similar set of values, so it is tabbing between the two forms in turn. The easiest solution for me was to hide the existing form, see here: https://stackoverflow.com/a/5494043/1061602.
The commonality between Form 4 and Form 5 was also that they had the same tabindex (6) however this was a red herring. Still investigating why the last select field is skipped in Chrome - however on iOS Safari it works as expected, so problems solved!!
这篇关于iOS Safari HTML表格下一个/上一个按钮 - 它们是如何工作的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
