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

Question

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

我知道我可以使用 tabindex 修复此问题，但我真的不想对所有 500 多个字段都进行 tabindex，只需修复这 4 个字段即可。

有什么方法可以只对表单的一部分进行 tabindex 吗？我试过了，但它不会切换到其他字段。有一些聪明的 JS 解决方案吗？或者以某种方式对这些字段进行分组，以便默认的 Tab 键将我带入该组，然后我可以在其中进行 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，但至少它是非常可控的并且应该不会导致错误。