HTMLElement：focus() 方法
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
HTMLElement.focus() 方法用于将焦点设置到指定的元素上（如果该元素可以获得焦点）。获得焦点的元素默认会接收键盘事件及类似事件。
默认情况下，浏览器会在聚焦元素后将其滚动到可视区域，并且可能会为获得焦点的元素提供可见指示（通常是在元素周围显示"焦点环"）。可通过参数选项来禁用默认滚动行为以及强制元素显示可见指示。
语法
focus()
focus(options)
参数
options可选-
一个用于控制聚焦过程的可选对象。该对象可以包含以下属性：
preventScroll可选-
一个布尔值，指示浏览器是否应滚动文档以将新获得焦点的元素显示在视口中。
preventScroll为false（默认值）时，浏览器会在聚焦元素后将其滚动到可视区域。如果preventScroll设置为true，则不会发生滚动。 focusVisible可选-
一个布尔值，设为
true表示强制显示焦点可见指示，设为false表示阻止显示焦点可见指示。如果未指定此属性，浏览器会在判断有助于提升用户无障碍体验时提供可见指示。
返回值
无（undefined）。
示例
聚焦文本框
本示例使用按钮将焦点设置到文本框上。
HTML
<input id="myTextField" value="文本字段。" />
<button id="focusButton">点击以将焦点设置到文本字段</button>
JavaScript
以下代码添加了一个事件处理器，在按钮被按下时将焦点设置到文本框上。请注意，大多数浏览器会自动为获得焦点的文本框添加可见指示（"焦点环"），因此代码未将 focusVisible 设置为 true。
document.getElementById("focusButton").addEventListener("click", () => {
document.getElementById("myTextField").focus();
});
结果
选择按钮即可将焦点设置到文本框上。
聚焦按钮
本示例演示了如何将焦点设置到按钮元素上。
HTML
首先定义三个按钮。中间和右侧的按钮会将焦点设置到最左侧的按钮上，最右侧的按钮还会指定 focusVisible。
<button id="myButton">按钮</button>
<button id="focusButton">点击以在“按钮”上设置焦点</button>
<button id="focusButtonVisibleIndication">
点击以在“按钮”上设置焦点和 focusVisible
</button>
JavaScript
以下代码为中间和右侧按钮设置了点击事件处理器。
document.getElementById("focusButton").addEventListener("click", () => {
document.getElementById("myButton").focus();
});
document
.getElementById("focusButtonVisibleIndication")
.addEventListener("click", () => {
document.getElementById("myButton").focus({ focusVisible: true });
});
结果
选择中间或最右侧的按钮，可以将焦点设置到最左侧的按钮上。
浏览器通常不会在以编程方式聚焦按钮元素时显示可见焦点指示，因此选择中间按钮的效果可能不太明显。但如果你的浏览器支持 focusVisible 选项，选择最右侧的按钮时应能看到最左侧按钮的焦点变化。
聚焦时是否滚动
本示例展示了将 preventScroll 选项分别设置为 true 和 false（默认值）时的聚焦效果。
HTML
HTML 定义了两个按钮，用于将焦点设置到屏幕外的第三个按钮上。
<button id="focus_scroll">点击以将焦点设置在屏幕外按钮上</button>
<button id="focus_no_scroll">点击以将焦点设置在屏幕外按钮上且不滚动</button>
<div id="container">
<button id="myButton">按钮</button>
</div>
JavaScript
以下代码为第一个和第二个按钮设置了点击事件处理器，以将焦点设置到最后一个按钮上。请注意，第一个处理器未指定 preventScroll 选项，因此滚动到获得焦点的元素的操作可用。
document.getElementById("focus_scroll").addEventListener("click", () => {
document.getElementById("myButton").focus(); // 默认：{preventScroll:false}
});
document.getElementById("focus_no_scroll").addEventListener("click", () => {
document.getElementById("myButton").focus({ preventScroll: true });
});
结果
选择第一个按钮可以聚焦并滚动到屏幕外的按钮。选择第二个按钮可以聚焦，但不会发生滚动。
规范
| Specification |
|---|
| HTML # dom-focus-dev |
备注
浏览器兼容性
参见
HTMLElement.blur：从元素上移除焦点。document.activeElement：获取当前获得焦点的元素。