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>

结果

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.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
focusChrome Full support 1Edge Full support 12Firefox Full support 5IE Full support 9Opera Full support 8Safari Full support 3WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 5Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
preventScroll Boolean optionChrome Full support 64Edge Full support ≤79Firefox Full support 68IE ? Opera Full support 51Safari ? WebView Android Full support 64Chrome Android Full support 64Firefox Android Full support 68Opera Android Full support 47Safari iOS ? Samsung Internet Android Full support 9.0

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

参见