Web/API/HTMLOrForeignElement/focus

The HTMLElement.focus() method sets focus on the specified element, if it can be focused. The focused element is the element which will receive keyboard and similar events by default.

Syntax

element.focus(options); // Object parameter

Parameters

options Optional

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

;; preventScroll Optional

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.

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>

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>

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>

Specification

Specification	Status	Comment
HTML Living StandardThe definition of 'focus' in that specification.	Living Standard
HTML 5.1The definition of 'focus' in that specification.	Recommendation
HTML5The definition of 'focus' in that specification.	Recommendation
Document Object Model (DOM) Level 2 HTML SpecificationThe definition of 'focus' in that specification.	Obsolete
Document Object Model (DOM) Level 1 SpecificationThe 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
• 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.

Browser compatibility

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.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
focus	Chrome Full support 1	Edge Full support 12	Firefox Full support 5	IE Full support 9	Opera Full support 8	Safari Full support 3	WebView Android Full support 4.4	Chrome Android Full support 18	Firefox Android Full support 5	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
preventScroll Boolean option	Chrome Full support 64	Edge Full support ≤79	Firefox Full support 68	IE ?	Opera Full support 51	Safari ?	WebView Android Full support 64	Chrome Android Full support 64	Firefox Android Full support 68	Opera Android Full support 47	Safari iOS ?	Samsung Internet Android Full support 9.0

Legend

Full support  

Full support

Compatibility unknown  

Compatibility unknown

See also

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

HTMLElement.focus() by Mozilla Contributors is licensed under CC-BY-SA 2.5.