HTMLElement.focus() - Web API 接口参考 编辑

HTMLElement.focus() 方法用于设置焦点，如果被指定的元素可以获取到焦点，焦点就会被设置到该元素上。得到焦点的元素会作为键盘导航时的当前元素/基准元素，也会接收到相应的键盘事件等事件。

语法

element.focus(options); // Object parameter

参数

options 可选

An optional object providing options to control aspects of the focusing process. This object may contain the following property:

preventScroll 可选

A Boolean value indicating whether or not the browser should scroll the document to bring the newly-focused element into view. A value of false for preventScroll (the default) means that the browser will scroll the element into view after focusing it. If preventScroll is set to true, no scrolling will occur.

示例

将焦点设置到文本框上

JavaScript

focusMethod = function getFocus() {
  document.getElementById("myTextField").focus();
}

HTML

<input type="text" id="myTextField" value="Text field.">
<p></p>
<button type="button" onclick="focusMethod()">点这里将焦点设置到文本框上！</button>

结果

将焦点设置到按钮上

JavaScript

focusMethod = function getFocus() {
  document.getElementById("myButton").focus();
}

HTML

<button type="button" id="myButton">Click Me!</button>
<p></p>
<button type="button" onclick="focusMethod()">点这里将焦点设置到按钮上！</button>

结果

Focus with focusOption

JavaScript

focusScrollMethod = function getFocus() {
  document.getElementById("myButton").focus({preventScroll:false});
}
focusNoScrollMethod = function getFocusWithoutScrolling() {
  document.getElementById("myButton").focus({preventScroll:true});
}

HTML

<button type="button" onclick="focusScrollMethod()">Click me to focus on the button!</button>
<button type="button" onclick="focusNoScrollMethod()">Click me to focus on the button without scrolling!</button>

<div id="container" style="height: 1000px; width: 1000px;">
<button type="button" id="myButton" style="margin-top: 500px;">Click Me!</button>
</div>

结果

规范

规范	状态	备注
HTML Living Standard focus	Living Standard
HTML 5.1 focus	Recommendation
HTML5 focus	Recommendation
Document Object Model (DOM) Level 2 HTML Specification focus	Obsolete
Document Object Model (DOM) Level 1 Specification focus	Obsolete

备注

• If you call HTMLElement.focus() from a mousedown event handler, you must call event.preventDefault() to keep the focus from leaving the HTMLElement

• Behaviour of the focus in relation to different HTML features like tabindex or shadow dom, which previously remained under-specified, were recently updated (as October of 2019). Checkout WHATWG blog for more info.

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参见

• DOM method HTMLElement.blur() to remove the focus from an element.
• document.activeElement to know which is the currently focused element.