html tabIndex属性详解

    我爱模板网在做下面的效果时，即按键盘上下键，能够让蓝色背景在行中移动，以选择不同的行，这个用js很好实现，但是由于列表比较多，所以超出了范围，使用了滚动条。可是，当用键盘移动到滚动条滚动范围之外时，发现滚动条不滚动，蓝色选中行已经到范围之外了，却看不到。最终百度到了办法，即给行所在的父级，即滚动条所在的容器加上“tabindex=-1”的属性，然后给他 focus，即焦点，然后再用上下箭头就可以了（当然，这也存在bug，即滚动了多少并不能预测，用js控制滚动条滚动方法更好点，不过没这个方便）。


    下面，我爱模板网就来聊聊这个tabindex：

    当使用键盘时，tabindex是个关键因素，它用来定位html元素。

    tabindex有三个值：0 ，-1， 以及X（X里32767是界点，稍后说明）

    原本在Html中，只有链接a和表单元素可以被键盘访问（即使是a也必须加上href属性才可以)，但是aria允许tabindex指定给任何html元素。

    当tabindex=0时，该元素可以用tab键获取焦点，且访问的顺序是按照元素在文档中的顺序来focus，即使采用了浮动改变了页面中显示的顺序，依然是按照html文档中的顺序来定位。

    当tabindex=-1时，该元素用tab键获取不到焦点，但是可以通过js获取，这样就便于我们通过js设置上下左右键的响应事件来focus，在widget内部可以用到。

    当tabindex>=1时，该元素可以用tab键获取焦点，而且优先级大于tabindex=0；不过在tabindex>=1时，数字越小，越先定位到。   

    在IE中，tabindex范围在1到32767之间（包括32767），在FF， Chrome无限制，不过一旦超出32768，顺序跟tabindex=0时一样。这个估计跟各个浏览器对int型的解析有关。