使用 tabindex 属性的解决方案
tabindex 属性允许使元素和具有该元素作为其 DOM 锚点的区域成为可聚焦区域，并允许允许或者阻止它们按顺序可聚焦，并为顺序焦点导航定义它们的相对顺序。
HTML5 规范支持 tabindex 的负值。
要防止特定元素上的制表符索引，我们可以使用 tabindex="-1"。
如果值为负，用户代理将设置元素的 tabindex 焦点标志，但该元素不应通过顺序焦点导航到达。
请注意，这是一项 HTML5 功能，可能不适用于旧浏览器。
防止标签索引的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<h2>Example of preventing tab indexing</h2>
<form action="/form/submit" method="post">
<input type="text"/>
<input tabindex="-1" placeholder="NoTabIndex"/>
<input type="text"/>
</form>
</body>
</html>
在下面，单击第一个元素并尝试使用“Tab”导航以查看结果。
当屏幕外内容出现在特定事件中时，负值会很有用。
另请注意，虽然用户将无法使用键盘聚焦具有负 tabindex 的元素，但 Javascript 可以通过使用 focus () 方法来做到这一点。
防止 <div> 元素上的标签索引的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
color: purple;
}
</style>
</head>
<body>
<h2>Example of preventing tab indexing</h2>
<p tabindex="1">HTML</p>
<p tabindex="3">CSS</p>
<div tabindex="-1">Prevented tab indexing</div>
<p tabindex="4">Javascript</p>
<p tabindex="2">Git</p>
<p tabindex="5">
Navigate the elements with the "Tab" button.
</p>
</body>
</html>
日期：2020-06-02 22:15:10 来源：oir作者：oir