htmltabindex

HTML tabindex 是一个用来指定元素在页面上的键盘焦点顺序的属性。当用户使用“Tab”键在页面上的元素之间进行跳转时，通过设置 tabindex 属性，可以决定元素的焦点顺序。

tabindex 属性的值可以是正整数、0、或者-1。具体含义如下：

- 正整数：表示元素按照指定的数值进行焦点顺序排序。例如，tabindex="1" 的元素将首先获得焦点，然后是 tabindex="2" 的元素，依此类推。

- 0：表示元素将按照其在文档中的顺序进行焦点排序。如果多个元素设置了相同的 tabindex 为0 ，它们的焦点顺序将根据元素在 HTML 文档中的出现顺序来决定。

- -1：表示元素不应该获得焦点。这样的元素仍然可以通过 JavaScript 的 focus() 方法来获得焦点。

下面是一些使用 tabindex 的示例：

1. 指定焦点顺序：

```html

```

在这个例子中，首先文本输入框 "name" 将获得焦点，然后是 "email" 输入框，*是提交按钮。

2. 按照文档顺序排序：

```html

Button 1

Button 2

Button 3

```

在这个例子中，按钮 "Button 1" 将首先获得焦点，然后是 tabindex 为 0 的 "Button 2"，*是 tabindex 为 0 的 "Button 3"。

3. 隐藏焦点元素：

```html

```

在这个例子中，通过将 tabindex 设置为 -1，并且用 CSS 隐藏了元素的外观，但是仍然可以通过 JavaScript 的 focus() 方法来将其焦点设置为这个元素。

需要注意的是，为了良好的用户体验，通常不建议修改默认的键盘焦点顺序。这是因为用户通常期望通过 Tab 键进行页面导航时按照自然顺序进行，而不是被人为地修改。只有在特殊需求下，才应该使用 tabindex 属性来修改焦点顺序。