[笔记]tabindex属性及特殊用法

大佬教程收集整理的这篇文章主要介绍了[笔记]tabindex属性及特殊用法，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

一、定义

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

二、用法

语法：<element tabindex=”number”>  默认值是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的聚焦和失焦的事件就可以正常使用了。

大佬总结

以上是大佬教程为你收集整理的[笔记]tabindex属性及特殊用法全部内容，希望文章能够帮你解决[笔记]tabindex属性及特殊用法所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。