tabindex 全局属性 是个整数,表示元素(如果可聚焦)是否能够接受输入焦点。 如果它应该参与键盘序列导航,那么就是它的位置。它可以设为多种值:
- tabindex=负值 (通常是tabindex=“-1”),表示元素是可聚焦的,但是不能通过键盘导航来访问到该元素,用JS做页面小组件内部键盘导航的时候非常有用。
tabindex="0"
,表示元素是可聚焦的,并且可以通过键盘导航来聚焦到该元素,它的相对顺序是当前处于的DOM结构来决定的。- tabindex=正值,表示元素是可聚焦的,并且可以通过键盘导航来访问到该元素;它的相对顺序按照tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex,它们的相对顺序按照他们在当前DOM中的先后顺序决定。
根据键盘序列导航的顺序,值为 0
、非法值、或者没有 tabindex 值的元素应该放置在 tabindex 值为正值的元素后面。
如果我们在 <div>
上设置了 tabindex
属性,它的子元素内容不能使用箭头键来滚动,除非我们在内容上也设置 tabindex
。查看这篇 fiddle 来理解 tabindex 的滚动影响。
注:tabindex 的最大值不应超过 32767。如果没有指定,它的默认值为 -1。
规范
Specification | Status | Comment |
---|---|---|
HTML Living Standard tabindex |
Living Standard | No change from latest snapshot, HTML 5.1 |
HTML 5.1 tabindex |
Recommendation | Snapshot of HTML Living Standard, no change from HTML5 |
HTML5 tabindex |
Recommendation | Snapshot of HTML Living Standard. From HTML 4.01 Specification, the attribute is now supported on all elements (global attributes). |
HTML 4.01 Specification tabindex |
Recommendation | Only supported on <a> , <area> , <button> , <object> , <select> , and <textarea> . |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
另见
- 所有全局属性
- 反映这个属性的
HTMLElement.tabIndex
- tabindex 的可访问性问题:请见 不要使用大于 0 的 Tabindex | Adrian Roselli。