tabindex属性及特殊用法

2017年06月04日Web前端

是否还在为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