HTML中的tabindex特性


本文作者: jsweibo

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

摘要

本文主要讲述了:

  1. 作用
  2. 取值范围
  3. 默认值

正文

作用

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

取值范围

负整数

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

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

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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>

参考资料

本文作者: jsweibo

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


本文对你有帮助?请支持我


支付宝
微信