Question

简单的问题但无法在任何地方找到任何答案。如何在上一个元素上按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格式，格式化是有意义的，为什么要跳过它。：）

Answer 1

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

最简单的方法是使用HTML tabindex属性：

<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/的工作示例）

TAB导航的黑名单元素？

1 个答案: