Html表单辅助功能:是否可以更改“下一个焦点字段”的顺序？

Question

很抱歉标题不好，我会尽量解释清楚;)

假设我们有这样的表单：

<form>
    <table>
        <tr>
            <td><input type="text" name="code-1" /></td>
            <td><input type="text" name="title-1" /></td>
            <td><input type="text" name="price-1" /></td>
        </tr>
        <tr>
            <td><input type="text" name="code-2" /></td>
            <td><input type="text" name="title-2" /></td>
            <td><input type="text" name="price-2" /></td>
        </tr>
        <tr>
            <td colspan="2">Total:</td>
            <td colspan="2"><input type="text" name="total" /></td>
        </tr>
    </table>
</form>

默认浏览器的可访问性表明，如果我将焦点放在字段code-1上并按下<Tab>，焦点将转到title-1，然后转到price-1、code-2、title-2等，并遵循表单元格的顺序。

我的目标是改变这种行为，以便将价格字段“分组”在一起:将焦点放在price-1上并按下<Tab>将焦点放在price-2上。

我知道这可以像这样拆分桌子

<form>
    <table>
        <tr>
            <td><input type="text" name="code-1" /></td>
            <td><input type="text" name="title-1" /></td>
        </tr>
        <tr>
            <td><input type="text" name="code-2" /></td>
            <td><input type="text" name="title-2" /></td>
        </tr>
        <tr>
            <td colspan="2">Total:</td>
        </tr>
    </table>
    <table>
        <tr>
            <td><input type="text" name="price-1" /></td>
        </tr>
        <tr>
            <td><input type="text" name="price-2" /></td>
        </tr>
        <tr>
            <td colspan="2"><input type="text" name="total" /></td>
        </tr>
    </table>
</form>

但如果可能的话，我会尽量避免分桌。

有人知道跨浏览器的非黑客解决方案吗？

Answer 1

您希望使用tabindex属性：

<INPUT tabindex="1" type="text" name="field1">
<INPUT tabindex="3" type="text" name="field2">
<INPUT tabindex="2" type="submit" name="submit">