TAB 导航中的黑名单元素？答案

【问题标题】：Blacklist element from TAB navigation?TAB 导航中的黑名单元素？
【发布时间】：2013-06-26 16:27:03
【问题描述】：

简单的问题，但在任何地方都找不到任何答案。如何在上一个元素上按 Tab 时不选中复选框。

HTML：

<table>
    <tr>
        <td>
            <input type='textbox' placeholder='1' />
        </td>
    </tr>
    <tr>
        <td>
            <input type='textbox' placeholder='2' />
        </td>
    </tr>
    <tr>
        <td>
            <input type='checkbox' />
        </td>
    </tr>
    <tr>
        <td>
            <input type='text' placeholder='3' />
        </td>
    </tr>
</table>

JsFiddle

基本上我想要这个结果：在文本框 1 中输入内容，按 TAB 进入文本框 2，再次按 TAB 进入文本框 3，从而跳过复选框。

这可能看起来很愚蠢，但我没有在表单中包含完整的 CSS 格式，因为格式是有道理的，为什么要跳过它。 :)

【问题讨论】：

据我所知，黑名单是不可能的。白名单是一种选择吗？

标签： html forms input checkbox tabindex

【解决方案1】：

有很多方法可以实现这一点。

最简单的方法是使用 HTML tabindexattribute：

<table>
    <tr>
        <td>
            <input type="text" tabindex="1" placeholder="1" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" tabindex="2" placeholder="2" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" tabindex="0" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" placeholder="3" tabindex="2" />
        </td>
    </tr>
</table>

请注意，复选框仍然是可聚焦的；但您必须先“浏览”所有其他元素。

（参见http://jsfiddle.net/URKkp/ 的工作示例）

【讨论】：