本文已参与「新人创作礼」活动，一起开启掘金创作之路

简介

tabindex是全局属性：用户操作tab键的顺序 ——HTML标签元素都可以用的属性，比如说id、class等属性都是HTML的全局属性。 tabindex属性是一个与键盘访问行为息息相关的属性，或者说是用户体验息息相关的属性 场景：鼠标坏了/投屏的键盘操作 作用：管理键盘焦点，决定元素能否被选中

交互元素/可访问元素：常见的a、button、input：隐式可聚焦元素、内置键盘事件处理 allyjs.io/data-tables…

document.activeElement 找到当前获得焦点的元素

css修改渲染顺序之后会不会影响tabindex顺序——还是会按照dom元素顺序

使用值

tabindex显示设置值：

1、负数：被忽略，-1和-9999的效果一致 -1的时候才能focus

如果不希望让可聚焦元素失去tab键获得焦点的话，不应该显式的设置tabindex的值为-1；反之，如果希望让可聚焦元素失去tab键获得焦点，只需要显式的设置tabindex的值为-1。 ——最适用的场景是：dialog模态框

2、正数：放在自然的tab前面，从小到大排序。最大值：32767 显式的给DOM元素设置tabindex大于0是一个极坏的做法。 ——更应该用页面布局解决 tab键聚焦元素的顺序是由DOM中元素的顺序决定的，而不是依赖视觉上的布局来决定

3、0:为了让非聚焦元素（比如div、span等）也能通过tab键获得焦点

部分CSS属性（改变文档流的CSS属性）会在渲染后页面效果上看上去tab键的混乱，但事实他还是依赖于DOM源的顺序进行切换 ——flex布局之后还是按照order顺序来的

autofocus 可以让元素自动获得焦点 blur、focus事件会前后触发