HTML | DOM tabIndex 属性

tabIndex 属性为 HTML 元素定义了一个可选的聚焦顺序。通过设置元素的 tabIndex 属性，可以控制页面上元素的聚焦顺序。聚焦顺序决定了当用户按下 tab 键时哪个元素将获得焦点。

语法

以下是 tabIndex 属性的语法:

object.tabIndex = number

属性值

tabIndex 属性的取值范围是一个整数值。可以为 tabIndex 属性指定以下值:

• -1: 禁止通过 tab 键聚焦到该元素，但是可以通过 JavaScript 聚焦到该元素。

• 0: 元素按照文档中的先后顺序获得焦点。

• 1及以上的整数: 元素按照数值从小到大的顺序获得焦点，如果两个元素的 tabIndex 属性相同，则按照文档中的先后顺序获得焦点。

示例

下面是为一个文本框设置了 tabIndex 属性的示例:

<input type="text" tabIndex="2">
<input type="text" tabIndex="1">
<input type="text" tabIndex="3">

在上述示例中，第二个文本框将首先获得焦点，其次是第一个文本框，最后是第三个文本框。

注意事项

• tabIndex 属性不是所有 HTML 元素都支持的。

• 尽管可以使用 tabIndex 属性确定一个元素的聚焦顺序，但是浏览器也会考虑该元素的可访问性，例如该元素是否可见、是否启用等，然后再决定聚焦顺序。

• 避免设置过多的正整数作为 tabIndex 属性，因为这样会给用户带来多余的聚焦选项，降低用户体验。

结论

tabIndex 属性是一个可以为网页元素定义聚焦顺序的有用工具。通过设置 tabIndex 属性，我们可以控制元素获得焦点的先后顺序，提高用户体验。需要注意的是，我们需要合理使用 tabIndex 属性，避免给用户带来混淆和烦恼。