TabIndex 属性 Tabindex="-1" 与Tabindex="0"、任意数字

当使用键盘时，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">
                    &times;
                </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"常用在弹框中，防止切换混乱

TabIndex 属性 Tabindex="-1" 与Tabindex="0"、任意数字

猜你喜欢