tabindex

最新推荐文章于 2025-07-07 09:42:02 发布

alisaGreen

最新推荐文章于 2025-07-07 09:42:02 发布

阅读量2.4k

点赞数 1

分类专栏： html 文章标签： tabindex表示元素是可聚焦的解决div回车失效没聚焦

html 专栏收录该内容

5 篇文章

订阅专栏

本文深入解析HTML中的tabindex全局属性，探讨其不同值对元素聚焦及键盘导航的影响，包括负值、0和正值的作用，以及如何解决不同浏览器下焦点高亮问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

tabindex 全局属性是个整数，表示元素（如果可聚焦）是否能够接受输入焦点。如果它应该参与键盘序列导航，那么就是它的位置。它可以设为多种值：

tabindex=负值 (通常是tabindex=“-1”)，表示元素是可聚焦的，但是不能通过键盘导航来访问到该元素，用JS做页面小组件内部键盘导航的时候非常有用。
tabindex=“0” ，表示元素是可聚焦的，并且可以通过键盘导航来聚焦到该元素，它的相对顺序是当前处于的DOM结构来决定的。
tabindex=正值，表示元素是可聚焦的，并且可以通过键盘导航来访问到该元素；它的相对顺序按照tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex，它们的相对顺序按照他们在当前DOM中的先后顺序决定。
根据键盘序列导航的顺序，值为 0 、非法值、或者没有 tabindex 值的元素应该放置在 tabindex 值为正值的元素后面。

如果我们在

上设置了 tabindex 属性，它的子元素内容不能使用箭头键来滚动，除非我们在内容上也设置 tabindex。查看这篇 fiddle 来理解 tabindex 的滚动影响。

注：tabindex 的最大值不应超过 32767。如果没有指定，它的默认值为 -1。
当hover的时候会有浅蓝色的框，通过查询使用一下的方法实现

<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<title>06</title>
	</head>
	<body>
		<div tabindex="2" style="border:1px solid #ccc;width:200px;height:200px;"> </div>
		<br>
		<div tabindex="1" style="border:1px solid #ccc;width:200px;height:200px;" > </div>
	</body>
</html>
    **说明：上图中的两个div都添加了tabindex属性，由于第二个div的tabindex属性值比第一个div的tabindex属性值小，所以在点击计算机“Tab”键时第二个div首先获取焦点，可是你留意了吗——获取焦点的div在谷歌浏览器中会出现一个浅蓝色的“框”，在IE浏览器中会出现一个由虚线构成的“框”，这和我们原来的框是不一样的，那么怎么解决这个问题呢？解决出现浅蓝“框”只需要向div标签的样式表中添加“outline:0;”样式即可，解决出现由虚线构成的“框”只需要向div标签中添加“hidefocus="true"”属性和属性值即可**；

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/tabindex

关于后期的框的去掉原文：https://blog.youkuaiyun.com/gaohuanjie/article/details/32328607