在填写表单是tab键能准确将焦点切换到下一个表单控件上,如

<div>
    <label for="">待办事件1</label>
    <input type="text" tabindex="1"/>
    <label for="complete">完成</label>
    <input type="radio" checked="checked" name="status" />
    <label for="complete">未完成</label>
    <input type="radio" name="status"/>
</div>
<div>
    <label for="">待办事件2</label>
    <input type="text" tabindex="2"/>
    <label for="complete">完成</label>
    <input type="radio" checked="checked" name="status2"/>
    <label for="complete">未完成</label>
    <input type="radio" name="status2"/>
</div>

当焦点聚焦早第一个输入框时,按下tab键,焦点在水平方向上切换(或者说按照表单控制排列的顺序切换),如图(切换到了第二个控件上)

blob.png

但是如果我想让焦点按照自己的定义的顺序切换应该怎么办?,有人会问,怎么会有这奇怪的需求,放心,总会有的

<div>
    <label for="">待办事件1</label>
    <input type="text" tabindex="1"/>
    <label for="complete">完成</label>
    <input type="radio" checked="checked" name="status" />
    <label for="complete">未完成</label>
    <input type="radio" name="status"/>
</div>
<div>
    <label for="">待办事件2</label>
    <input type="text" tabindex="2"/>
    <label for="complete">完成</label>
    <input type="radio" checked="checked" name="status2"/>
    <label for="complete">未完成</label>
    <input type="radio" name="status2"/>
</div>

只要给input加上tabindex属性即可一步搞定

blob.png

注意如果tabindex的值为负数,tab切换时会自动忽略该控件

代码演示地址:http://codepen.io/cococoder/pen/gwkLAB