HTML - tabindex 属性

HTML tabindex 是一个全局属性，它允许开发人员通过按 Tab 键使 HTML 元素可聚焦或阻止它们按顺序聚焦。

此标签接受整数值，并根据数字的值返回各种结果。负值（如 tabindex = “-1”）表示无法通过顺序键盘导航访问该元素。正值表示元素在顺序键盘导航中应该是可聚焦的，数字的值确定元素的顺序。

语法


<element tabindex = "" >

适用于

由于 tabindex 是 HTML 中的全局属性，因此 HTML 中的所有标签都支持 tabindex 属性。

HTML tabindex 属性的示例

以下示例将说明 HTML tabindex 属性，我们应该在何处以及如何使用此属性！

使用 tabindex 浏览 div 标签

在以下示例中，让我们看看 HTML 文档中 tabindex 属性的用法。此代码定义了 tabindex，用于在各种标签（如 input 和 div）中导航。


<!DOCTYPE html>
<html>

<head>
	 <style>
			div:focus {
				 font-weight: bold;
			}
	 </style>
</head>

<body>
	 <p>Click anywhere in this output screen 
	 and press tab to navigate.</p>
	 <label>First in tab order: 
			<input type="text">
	 </label>
	 <div tabindex="0">
			Tabbable due to tabindex.
	 </div>
	 <div>
			Not tabbable: no tabindex.
	 </div>
	 <label>Third in tab order: 
			<input type="text">
	 </label>
</body>

</html>

tabindex 的正值

考虑到以下示例，我们演示了 tabindex 属性的正值。其顺序由数字的值定义。也就是说，tabindex=“2” 聚焦在 tabindex=“3” 之前和 tabindex=“1” 之后。


<!DOCTYPE html>
<html>

<head>
	 <style>
			p:focus {
				 font-weight: bold;
			}
	 </style>
</head>

<body>
	 <h2>Click anywhere in this page, 
			then try pressing tab key.</h2>
	 <p tabindex="1">
			First in tab order
	 </p>
	 <p tabindex="2">
			Second in tab order
	 </p>
	 <p tabindex="3">
			Third in tab order 
	 </p>
</body>

</html>

tabindex 的负值

让我们看一下以下示例，我们使用的是 tabindex 属性的负值。如果我们传递负值，则无法通过顺序键盘导航访问该元素。


<!DOCTYPE html>
<html>

<head>
	 <style>
			div:focus {
				 font-weight: bold;
			}
	 </style>
</head>

<body>
	 <h2>Click anywhere in this page, 
	 then try tabbing through the elements.</h2>
	 <div tabindex="-1">
			tabindex with -1 value!
	 </div>
	 <div tabindex="2">
			tabindex with 2 value!
	 </div>
	 <div tabindex="0">
			tabindex with 0 value!
	 </div>
	 <div tabindex="-2">
			tabindex with -2 value!
	 </div>
</body>

</html>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

打印本页