您当前的位置: 当使用键盘时，tabindex是个关键因素，它用来定位html元素。
tabindex有三个值：0 ，-1， 以及X（X里32767是界点，稍后说明）
先写一个小例子了解下：
<p> <a href="http://www.dreamdu.com/xhtml/" tabindex="1">1</a> <a href="http://www.dreamdu.com/css/" tabindex="3">3</a> <a href="http://www.dreamdu.com/javascript/" tabindex="2">2</a></p><p>连续按 "Tab",可以改变焦点的位置.遍历的顺序是1-2-3.</p>
原本在Html中，只有链接a和表单元素可以被键盘访问（即使是a也必须加上href属性才可以)，但是aria允许tabindex指定给任何html元素。
（1）当tabindex=0时，该元素可以用tab键获取焦点，且访问的顺序是按照元素在文档中的顺序来focus，即使采用了浮动改变了页面中显示的顺序，依然是按照html文档中的顺序来定位。
（2）当tabindex=-1时，该元素用tab键获取不到焦点，但是可以通过js获取，这样就便于我们通过js设置上下左右键的响应事件来focus，在widget内部可以用到。
（3）当tabindex>=1时，该元素可以用tab键获取焦点，而且优先级大于tabindex=0；不过在tabindex>=1时，数字越小，越先定位到。
兼容： 在IE中，tabindex范围在1到32767之间（包括32767），在FF， Chrome无限制，不过一旦超出32768，顺序跟tabindex=0时一样。这个估计跟各个浏览器对int型的解析有关。
补充说明：学习bootstrap的modal时，用到了该属性。
在bootstrap模态框里有一行属性tabindex="-1"在模态框外层标签里，这里作用是如果设置为-1,就表示modal框脱离了全局html的tab切换页面，独立出来，最终形成你要的结果！
例子：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Bootstrap 实例 - 模态框（Modal）插件</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><h2>创建模态框（Modal）</h2><!-- 按钮触发模态框 --><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 开始演示模态框</button><input type="text"><!-- 模态框（Modal） --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title" id="myModalLabel"> 模态框（Modal）标题 </h4> </div> <div class="modal-body"> 在这里添加一些文本 姓名：<input type="text"> <!--电话：<input type="tel" tabindex="-1">--> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button> <button type="button" class="btn btn-primary"> 提交更改 </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --></div></body></html>
这里我尝试tabindex="-1"效果，实践后总结出：
tabindex="-1"作用是脱离全局HTML的TAB切换，独立出来。如果不加的话，当模态框显示时，TAB键会切换到除模态框以外遮罩层下的文档节点
所以说tabindex="-1"常用在弹框中，防止切换混乱