HTML5 增加了辅助 DOM 焦点管理的功能
warning:
这篇文章距离上次修改已过202天，其中的内容可能已经有所变动。
HTML5 增加了一些辅助功能来管理DOM的焦点，主要是通过使用tabindex属性和相关的JavaScript API。
例如，你可以使用tabindex="0"来允许一个元素接受键盘焦点，并使用JavaScript的document.getElementById('elementId').focus()来为特定元素设置焦点。
以下是一个简单的示例，展示了如何在HTML5中使用tabindex以及JavaScript的focus()方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Focus Example</title>
</head>
<body>
<button tabindex="0">Button 1</button>
<button tabindex="0">Button 2</button>
<script>
// 获取页面上第一个tabindex为0的元素，并为它设置焦点
var focusableElements = document.querySelectorAll('[tabindex="0"]');
if (focusableElements.length > 0) {
focusableElements[0].focus();
}
</script>
</body>
</html>在这个例子中，我们有两个按钮，都设置了tabindex="0"，这意味着它们都可以通过Tab键接收键盘焦点。然后，通过JavaScript，我们选择页面上的所有tabindex="0"元素，并为其中的第一个元素设置焦点。这可以帮助改善网站的可访问性，特别是对于使用键盘导航网站的用户。
评论已关闭