HTMLElement：focus() 方法

聚焦按钮

本示例演示了如何将焦点设置到按钮元素上。

HTML

首先定义三个按钮。中间和右侧的按钮会将焦点设置到最左侧的按钮上，最右侧的按钮还会指定 focusVisible。

html按钮

点击以在“按钮”上设置焦点

点击以在“按钮”上设置焦点和 focusVisible

JavaScript

以下代码为中间和右侧按钮设置了点击事件处理器。

jsdocument.getElementById("focusButton").addEventListener("click", () => {

document.getElementById("myButton").focus();

});

document

.getElementById("focusButtonVisibleIndication")

.addEventListener("click", () => {

document.getElementById("myButton").focus({ focusVisible: true });

});

结果

选择中间或最右侧的按钮，可以将焦点设置到最左侧的按钮上。

浏览器通常不会在以编程方式聚焦按钮元素时显示可见焦点指示，因此选择中间按钮的效果可能不太明显。但如果你的浏览器支持 focusVisible 选项，选择最右侧的按钮时应能看到最左侧按钮的焦点变化。