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
forpreventScroll
(the default) means that the browser will scroll the element into view after focusing it. IfpreventScroll
is set totrue
, 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 callevent.preventDefault()
to keep the focus from leaving theHTMLElement
-
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
参见
- DOM method
HTMLElement.blur()
to remove the focus from an element. document.activeElement
to know which is the currently focused element.