HTMLElement.focus()

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>

结果

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>

结果

• 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.

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