tabindex
报告反馈
试一试
tabindex
全局属性 允许开发者使 HTML 元素可聚焦,允许或阻止它们按顺序可聚焦(通常使用 Tab 键,因此得名),并确定它们按顺序聚焦导航的相对顺序。
它接受一个整数作为值,根据整数的值产生不同的结果。
- 负值(确切的负值实际上并不重要,通常是
tabindex="-1"
)表示该元素无法通过顺序键盘导航访问。注意:
tabindex="-1"
可能对那些不应使用 Tab 键直接导航,但需要将键盘焦点设置为它们的元素有用。例如,一个屏幕外模态窗口,当它进入视图时应该被聚焦,或者一个当错误的表单提交时应该立即被聚焦的表单提交错误消息。 tabindex="0"
表示该元素在顺序键盘导航中应该是可聚焦的,在任何正的tabindex
值之后。这些元素的焦点导航顺序由它们在文档源中的顺序定义。- 正值 表示该元素应该在顺序键盘导航中是可聚焦的,其顺序由数字的值定义。也就是说,
tabindex="4"
在tabindex="5"
和tabindex="0"
之前聚焦,但在tabindex="3"
之后聚焦。如果多个元素共享相同的正tabindex
值,它们彼此之间的顺序遵循它们在文档源中的位置。tabindex
的最大值为 32767。 - 如果
tabindex
属性包含,但没有设置值,那么元素是否可聚焦由用户代理决定。警告:建议您仅使用
0
和-1
作为tabindex
值。避免使用大于0
的tabindex
值和可以更改可聚焦 HTML 元素顺序的 CSS 属性(Ordering flex items)。这样做会使依赖键盘导航或辅助技术的使用者难以导航和操作页面内容。相反,请按照逻辑顺序编写文档中的元素。
一些可聚焦的 HTML 元素默认情况下具有 0
的 tabindex
值,由 用户代理 在后台设置。这些元素是具有 href
属性的 <a>
或 <area>
,<button>
,<frame>
已弃用 ,<iframe>
,<input>
,<object>
,<select>
,<textarea>
,以及 SVG <a>
元素,或者为 <details>
元素提供摘要的 <summary>
元素。开发人员不应该在这些元素中添加 tabindex
属性,除非它改变了默认行为(例如,包括一个负值将从焦点导航顺序中删除该元素)。
警告:tabindex
属性不能用于 <dialog>
元素。
无障碍问题
规范
规范 |
---|
HTML 标准 # attr-tabindex |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。
另请参阅
- 所有 全局属性
HTMLElement.tabIndex
反映此属性tabindex
的辅助功能问题:请参阅 Adrian Roselli 的 Don't Use Tabindex Greater than 0