有没有办法只在 HTML 表单中的某些字段上使用 tabindex？

Question

我有一组 8 个复杂的表单（70 多个字段）用于存储团队报告。表格的一部分在 4 列宽和 2 列高的表格中包含团队成员姓名（名字在上面，姓在下面）。当用户填写表单时，Tab 键将它们带入名字，然后转到姓氏，因为这是它们在源中的顺序（一个 TR 中的名字和下一个 TR 中的姓氏）。显然，如果 tab 键从名字到姓氏，然后再到下一个名字，对我的用户来说会更容易。

我知道我可以用 tabindex 解决这个问题，但我真的不想对所有 500 多个字段进行 tabindex ，所以修复这 4 个字段。

有什么方法可以让我只对表单的一部分进行制表索引吗？我试过了，但它不会跳到其他字段。有一些聪明的JS解决方案吗？或者以某种方式对这些字段进行分组，以便默认选项卡将我带入组中，然后我可以在里面设置 tabindex？

如果你愿意，可以叫我懒惰。但我正在努力为自己节省大量剪切和粘贴以及犯错的时间。

干杯！

Answer 1

你能做的最好的就是在名字输入之前给所有输入相同的 tabIndex，它比名字输入小 1，然后在名字输入之后给所有输入相同的 tabIndex比输入的姓氏高 1。

<input type="text" tabIndex="1"><br>
<input type="text" tabIndex="1"><br>
...
<table>
    <tr>
        <td><input type="text" tabIndex="2"></td>
        <td><input type="text" tabIndex="4"></td>
        <td><input type="text" tabIndex="6"></td>
        <td><input type="text" tabIndex="8"></td>
    </tr>
    <tr>
        <td><input type="text" tabIndex="3"></td>
        <td><input type="text" tabIndex="5"></td>
        <td><input type="text" tabIndex="7"></td>
        <td><input type="text" tabIndex="9"></td>
    </tr>
</table>
<input type="text" tabIndex="10"><br>
<input type="text" tabIndex="10"><br>
...

我想这就是你想要的：http://jsfiddle.net/9ffWs/

它仍然需要您为每个输入添加一个 tabIndex，但至少它是非常可控的并且应该不会导致错误。