html中的tabindex属性

文章类型:html

发布者:admin

发布时间:2023-06-28

一是什么

1:HTML tabindex属性是一个“全局属性”,所谓“全局属性”,可以理解为“公共汽车属性”,也就是所有HTML标签都可以用的属性,比方说id,class属性等

2:浏览器支持多年,基本特性没有兼容性问题

3:tabindex属性是一个与键盘访问行为息息相关的属性,跟用户体验性相关的

二:形式

1:tab + index,tab指的就是键盘上的Tab键,index遍历数组的时候,或者数据库中都会有index这个东西,表示“索引”

2:元素使用Tab键进行focus时候的顺序值

3:tabindex支持正值和负值

4:tabindex属性值的最大值不能超过32767。如果tabindex缺省,则使用默认值-1

5:tabindex的索引属性不再是最靠前,而是最靠后,比浏览器窗体自身的控件元素的focus顺序还要靠后

6:根据DOM元素在文档中的位置决定的,越靠前越外层的元素索引顺序更高

7:tabindex属性的键盘索引顺序其实是从数值1开始的,不是0,1索引顺序是最靠前的

8:tabindex="0"和tabindex="-1"的唯一区别就是键盘也能focus

三:使用场景

1:使用键盘进行元素的选择聚焦,实现对应的功能,提示体验下

2:hover <div>显示下拉键盘支持

3:对网站模块进行自定义的键盘支持

4:临时改变页面索引起始位置

四:代码:

<div tabindex="0">tabindex="0"</div>//先触发
<div tabindex="1">tabindex="1"</div> 
<div class="button" tabindex="0" role="button">按钮</div>
div.setAttribute('tabindex', '-1');
div.focus();