HTML中的tabindex特性

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/03/23/HTML%E4%B8%AD%E7%9A%84tabindex%E7%89%B9%E6%80%A7/

摘要

本文主要讲述了：

作用
取值范围
默认值

正文

作用

是否可被聚焦
若可被聚焦，是否可以通过键盘导航来聚焦

取值范围

负整数

可被聚焦
不可通过键盘导航来聚焦

注：非表单控件的元素缺省为-1

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" tabindex="-1" />
    <input type="text" tabindex="-1" />
    <input type="text" tabindex="-1" />
    <style>
      :focus {
        outline-color: #f00;
      }
    </style>
  </body>
</html>

0

可被聚焦
可通过键盘导航来聚焦
元素的聚焦顺序根据元素的先后顺序而定

注：表单控件的默认值为0

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" tabindex="0" />
    <input type="text" tabindex="0" />
    <input type="text" tabindex="0" />
    <style>
      :focus {
        outline-color: #f00;
      }
    </style>
  </body>
</html>

正整数

可被聚焦
可通过键盘导航来聚焦
元素的聚焦顺序根据正整数的大小而定

注意：最大值为32767

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" tabindex="3" />
    <input type="text" tabindex="2" />
    <input type="text" tabindex="1" />
    <style>
      :focus {
        outline-color: #f00;
      }
    </style>
  </body>
</html>