HTMLElement: focus() 方法
Baseline 广泛可用 *
HTMLElement.focus() 方法会将焦点设置到指定的元素上，前提是该元素可以获得焦点。获得焦点的元素将默认接收键盘和类似事件。
默认情况下，浏览器在聚焦元素后会滚动页面以使其进入视口，并且可能还会提供可见的焦点指示（通常是通过在元素周围显示“焦点环”）。提供了参数选项来禁用默认滚动并强制在元素上显示可见指示。
语法
focus()
focus(options)
参数
options可选-
一个可选对象，用于控制聚焦过程的各个方面。此对象可能包含以下属性：
preventScroll可选-
一个布尔值，指示浏览器是否应滚动文档以将新获得的焦点元素带入视口。
preventScroll的值为false（默认值）表示浏览器在聚焦元素后会将其滚动到视口。如果将preventScroll设置为true，则不会发生滚动。 focusVisible可选 实验性-
一个布尔值，应将其设置为
true以强制显示元素获得焦点的可见指示，或设置为false以阻止显示。如果未指定该属性，浏览器将提供可见指示，如果它认为这能提高用户可访问性。
返回值
无（undefined）。
示例
聚焦文本字段
此示例使用一个按钮来将焦点设置到文本字段。
HTML
<input id="myTextField" value="Text field." />
<button id="focusButton">Click to set focus on the text field</button>
JavaScript
下面的代码向按钮添加了一个事件处理程序，以便在按下按钮时将焦点设置到文本字段。请注意，大多数浏览器会自动为获得焦点的文本字段添加可见指示（“焦点环”），因此代码不会将 focusVisible 设置为 true。
document.getElementById("focusButton").addEventListener("click", () => {
document.getElementById("myTextField").focus();
});
结果
选择按钮以将焦点设置到文本字段。
聚焦按钮
此示例演示了如何将焦点设置到按钮元素。
HTML
首先，我们定义三个按钮。中间的按钮和最右边的按钮都将把焦点设置到最左边的按钮。最右边的按钮还将指定 focusVisible。
<button id="myButton">Button</button>
<button id="focusButton">Click to set focus on "Button"</button>
<button id="focusButtonVisibleIndication">
Click to set focus and focusVisible on "Button"
</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">Click to set focus on off-screen button</button>
<button id="focus_no_scroll">
Click to set focus on offscreen button without scrolling
</button>
<div id="container">
<button id="myButton">Button</button>
</div>
JavaScript
此代码在第一个和第二个按钮上设置了一个点击事件处理程序，以将焦点设置到最后一个按钮。请注意，第一个处理程序未指定 preventScroll 选项，因此将启用滚动到获得焦点的元素。第二个处理程序设置 preventScroll 为 true，因此滚动将被禁用。
document.getElementById("focus_scroll").addEventListener("click", () => {
document.getElementById("myButton").focus(); // default: {preventScroll:false}
});
document.getElementById("focus_no_scroll").addEventListener("click", () => {
document.getElementById("myButton").focus({ preventScroll: true });
});
结果
选择第一个按钮以设置焦点并滚动到屏幕外按钮。选择第二个按钮会设置焦点，但会禁用滚动。
规范
| 规范 |
|---|
| HTML # dom-focus-dev |
注意
- 如果在
mousedown事件处理程序中调用HTMLElement.focus()，则必须调用event.preventDefault()以防止焦点离开HTMLElement。 - 焦点与各种 HTML 特性（如
tabindex或 shadow dom）相关的行为，此前一直未明确规定，已于 2019 年 10 月更新。有关更多信息，请参阅 WHATWG 博客。
浏览器兼容性
加载中…
另见
HTMLElement.blur用于移除元素的焦点。document.activeElement用于了解当前获得焦点的元素。