tabindex属性及特殊用法

2017年06月04日Web前端0

是否还在为div不能绑定focus和blur事件而烦恼，那么来了解下tabindex属性吧。

一、定义

tabindex 属性规定元素的 tab 键控制次序（当 tab 键用于导航时）。

二、用法

语法：

 默认值是0 W3C的规定，tabindex属性的范围在0到 32767之间。

tabindex中的值规定了我们按tab键时选中的顺序。顺序按照从1开始，从小到大，当存在相同值时，按照html文档中的顺序，当值是0时，他在所有设置了tabindex值的元素之后，当值是-1时，他将永远不会被tab键选中。例如：

<input type="text" value="a">
<input type="text" tabindex="0" value="b">
<input type="text" tabindex="3" value="c">
<input type="text" tabindex="-1" value="d">
<input type="text" value="e">
<input type="text" tabindex="2" value="f">
<input type="text" tabindex="2" value="g">
<input type="text" tabindex="1" value="h">
<input type="text" value="i">

部分input给了tabindex值，点击tab键，我们可以得到顺序：h->f->g->c->a->b->e->i，而d无法被tab键选中。

三、特殊用法

<div id="box"></div>
document.getElementById('box').onfocus = function() {
    console.log('focus');
};
document.getElementById('box').onblur = function() {
    console.log('blur');
};

无论我们怎么点击div或者使他失去焦点，控制台上都不会有任何打印，此时给div设置个tabindex属性为-1。

<div id="box" tabindex="-1"></div>

此时操作div，对应的focus和blur事件就可以触发了。

注：tabindex赋值其他值也是可以的，不过其他值时，该div会被tab键选中，不友好。（tab键常用来选择输入的）

当然，此时点击div时，会显示一个类似于边框的样式（其实是outline），这是用户默认的样式。

我们可以设置个初始化的样式覆盖掉他。

div:focus {
    outline: none;
}

这样，div的聚焦和失焦的事件就可以正常使用了。

详细demo查看：github。

HTMLHTML5JavaScripttips笔记

目录