聚焦按钮
此示例演示了如何将焦点设置到按钮元素。
HTML
首先，我们定义三个按钮。中间的按钮和最右边的按钮都将把焦点设置到最左边的按钮。最右边的按钮还将指定 focusVisible。
html
Click to set focus and focusVisible on "Button"
JavaScript
下面的代码设置了中间按钮和最右边按钮的点击事件处理程序。
jsdocument.getElementById("focusButton").addEventListener("click", () => {
document.getElementById("myButton").focus();
});
document
.getElementById("focusButtonVisibleIndication")
.addEventListener("click", () => {
document.getElementById("myButton").focus({ focusVisible: true });
});
结果
选择中间按钮或最右边的按钮将焦点设置到最左边的按钮。
浏览器通常不会在以编程方式设置焦点时显示按钮元素的可见焦点指示，因此选择中间按钮的效果可能不明显。但是，如果您的浏览器支持 focusVisible 选项，您应该会在选择最右边的按钮时看到焦点转移到最左边的按钮上。