Наши волонтёры ещё не перевели данную статью на Русский. Присоединяйтесь к нам и помогите сделать эту работу!
Вы можете также прочитать эту статью на English (US).

The HTMLElement.focus() method sets focus on the specified element, if it can be focused.

Syntax

element.focus();
element.focus(focusOption); // Object parameter

Parameters

focusOptions Optional
Is an Object with the following property:
preventScroll Optional
Is a Boolean value:
  • If false, the method will scroll the element into the visible area of the browser window
  • If true,  the method will NOT scroll the element into the visible area of the browser window.

Examples

Focus on a text field

JavaScript

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

HTML

<input type="text" id="myTextField" value="Text field.">
<p></p>
<button type="button" onclick="focusMethod()">Click me to focus on the text field!</button>

Result

Focus on a 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()">Click me to focus on the button!</button>

Result

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>

Result

Specification

Specification Status Comment
HTML Living Standard
The definition of 'focus' in that specification.
Living Standard  
HTML 5.1
The definition of 'focus' in that specification.
Recommendation  
HTML5
The definition of 'focus' in that specification.
Recommendation  
Document Object Model (DOM) Level 2 HTML Specification
The definition of 'focus' in that specification.
Obsolete  
Document Object Model (DOM) Level 1 Specification
The definition of 'focus' in that specification.
Obsolete  

Notes

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 45Edge Full support YesFirefox Full support 5IE Full support 9Opera Full support 32Safari ? WebView Android Full support 45Chrome Android Full support 45Edge Mobile Full support YesFirefox Android Full support 5Opera Android Full support 32Safari iOS ? Samsung Internet Android ?
preventScroll boolean optionChrome Full support 64Edge ? Firefox ? IE ? Opera Full support 51Safari ? WebView Android Full support 64Chrome Android Full support 64Edge Mobile ? Firefox Android ? Opera Android Full support 51Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

See also

Метки документа и участники

Обновлялась последний раз: mfluehr,