17/2/23, 18:13 HTMLElement.

focus() - Web APIs | MDN

HTMLElement.focus()
The HTMLElement.focus() method sets focus on the specified element, if it can be focused. The focused element is the element that will
receive keyboard and similar events by default.
By default the browser will scroll the element into view after focusing it, and it may also provide visible indication of the focused element
(typically by displaying a "focus ring" around the element). Parameter options are provided to disable the default scrolling and force visible
indication on elements.

Syntax
focus()
focus(options)

Parameters
options Optional
An optional object for controlling aspects of the focusing process. This object may contain the following properties:
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.

focusVisible Optional
A boolean value that should be set to true to force visible indication that the element is focused. By default, or if the property is not true ,
a browser may still provide visible indication if it determines that this would improve accessibility for users.
Return value
None ( undefined ).

Examples
Focus on a text field
This example uses a button to set the focus on a text field.
HTML
<input id="myTextField" value="Text field." />
<button id="focusButton">Click to set focus on the text field</button>

JavaScript
The code below adds an event handler to set the focus on the text field when the button is pressed. Note that most browsers will
automatically add visible indication (a "focus ring") for a focused text field, so the code does not set focusVisible to true .
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus 1/4
17/2/23, 18:13 HTMLElement.focus() - Web APIs | MDN

document.getElementById("focusButton").addEventListener("click", () => {
document.getElementById("myTextField").focus();
});

Result
Select the button to set focus on the text field.

Text field. Click to set focus on the text field

Focus on a button
This example demonstrates how you can set the focus on a button element.
HTML
First we define three buttons. Both the middle and right button will set focus on the left-most button. The right right-most button will also
specify focusVisible .
<button id="myButton">Button</button>
<button id="focusButton">Click to set focus on "Button"</button>
<button id="focusButtonVisibleIndication">
Click to set focus and focusVisible on "Button"
</button>

JavaScript
The code below sets up handlers for click events on the middle and right buttons.
document.getElementById("focusButton").addEventListener("click", () => {
document.getElementById("myButton").focus();
});

document.getElementById("focusButtonVisibleIndication").addEventListener("click", () => {
document.getElementById("myButton").focus({focusVisible: true});
});

Result
Select either the middle button or right-most button to set focus on the left-most button.
Browsers do not usually show visible focus indication on button elements when focus is set programmatically, so the effect of selecting the
middle button may not be obvious. However provided the focusVisible option is supported on your browser, you should see focus changing on
the left-most button when the right-most button is selected.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus 2/4
17/2/23, 18:13 HTMLElement.focus() - Web APIs | MDN

Button Click to set focus on "Button" Click to set focus and focusVisible on "Button"

Focus with and without scrolling

This example shows the effect of setting focus with the option preventScroll set true and false (the default).
HTML
The HTML defines two buttons that will be used to set the focus of a third button that is off-screen
<button id="focus_scroll">Click to set focus on off-screen button</button>
<button id="focus_no_scroll">
Click to set focus on offscreen button without scrolling
</button>

<div id="container">
<button id="myButton" style="margin-top: 500px;">Button</button>
</div>

JavaScript
This code sets a click event handler on the first and second buttons to set the focus on the last button. Note that the first handler doesn't
specify the preventScroll option so scrolling to the focused element will be enabled.
document.getElementById("focus_scroll").addEventListener("click", () => {
document.getElementById("myButton").focus(); // default: {preventScroll:false}
});

document.getElementById("focus_no_scroll").addEventListener("click", () => {
document.getElementById("myButton").focus({preventScroll:true});
});

Result
Select the first button to set focus and scroll to the off-screen button. Selecting the second button set's the focus, but scrolling is disabled.

Click to set focus on off-screen button Click to set focus on offscreen button without scrolling

Specifications

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus 3/4
17/2/23, 18:13 HTMLElement.focus() - Web APIs | MDN

Specification
HTML Standard
# dom-focus-dev

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

Behavior of the focus in relation to different HTML features like tabindex or shadow dom, which previously remained under-specified,
were updated in October 2019. See the WHATWG blog for more information.

Browser compatibility
Report problems with this compatibility data on GitHub

diordnA rof xoferiF

diordnA emorhC
emorhC

xoferiF

arepO

irafaS
egdE

Chrome 1 Edge 12 Firefox 1.5 Opera 8 Safari 3 Chrome 18 Firefox for 4

focus
Android Android
Chrome No Edge No Firefox 104 Opera No Safari No Chrome No Firefox 104
options.focusVisible
parameter Android for
Android
Chrome 64 Edge 17 Firefox 68 Opera 51 Safari 15 Chrome No Firefox No
options.preventScroll
parameter Android for
Android
Tip: you can click/tap on a cell for more information.
Full support No support Experimental. Expect behavior to change in the future. See implementation notes.

See also
HTMLElement.blur to remove the focus from an element.
document.activeElement to know which is the currently focused element.

This page was last modified on Jan 11, 2023 by MDN contributors.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus 4/4