"tabindex"属性是HTML元素中的一个属性，用于定义元素在通过键盘导航时的顺序。该属性接受一个整数值，通常为正整数，用于指定元素的tab键顺序。但是，当"tabindex"属性的值为-1时，它有特殊的含义。
当"tabindex"的值为-1时，它表示该元素虽然可以通过JavaScript聚焦，但在通过按下Tab键进行导航时会被忽略。换句话说，元素不会参与普通的Tab键切换焦点的顺序。
这种情况通常用于通过JavaScript动态管理焦点，而不希望用户通过Tab键访问特定元素。例如，在某些交互式Web应用程序中，可能需要通过JavaScript在特定条件下将焦点设置在某个元素上，但又不希望用户通过Tab键访问该元素。
让我们通过一个简单的示例来说明。假设我们有以下HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabindex Example</title>
<style>
.focusable {
padding: 10px;
margin: 5px;
border: 1px solid #ccc;
cursor: pointer;
}
</style>
</head>
<body>
<div class="focusable" tabindex="0">First Element (tabindex="0")</div>
<div class="focusable" tabindex="-1">Second Element (tabindex="-1")</div>
<div class="focusable" tabindex="0">Third Element (tabindex="0")</div>
<script>
// JavaScript代码，用于动态设置焦点
document.querySelector('.focusable').addEventListener('click', function() {
document.querySelector('.focusable[tabindex="-1"]').focus();
});
</script>
</body>
</html>
在这个例子中，我们有三个div元素，分别具有不同的"tabindex"值。第一个和第三个元素的"tabindex"值为0，表示它们参与Tab键导航的顺序。第二个元素的"tabindex"值为-1，表示它在Tab键导航中被忽略。
通过JavaScript，我们为第一个元素添加了一个点击事件处理程序。当用户点击第一个元素时，JavaScript会将焦点设置到"tabindex"值为-1的第二个元素。虽然通过JavaScript可以设置焦点到"tabindex"为-1的元素，但用户无法通过Tab键访问该元素。
这种用法对于构建自定义键盘导航、模态框、弹出窗口等交互式组件非常有用，可以更精细地控制焦点的流向。
标签：JavaScript,焦点,元素,键盘,Tab,导航,tabindex From： https://www.cnblogs.com/sap-jerry/p/17890755.html