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

阅读更多

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

 

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

先写一个小例子了解下：

    1      
    3      
    2

连续按 "Tab",可以改变焦点的位置.遍历的顺序是1-2-3.

 

  原本在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切换页面，独立出来，最终形成你要的结果！

 

例子：

    
    
    
    
    



创建模态框（Modal）


    开始演示模态框




    

        

            

                
                    ×
                
                

                    模态框（Modal）标题
                
            
            

                在这里添加一些文本
                姓名：
                
            
            

                关闭
                
                
                    提交更改
                
            
        

    

 

这里我尝试tabindex="-1"效果，实践后总结出：

tabindex="-1"作用是脱离全局HTML的TAB切换，独立出来。如果不加的话，当模态框显示时，TAB键会切换到除模态框以外遮罩层下的文档节点

所以说tabindex="-1"常用在弹框中，防止切换混乱