HTMLElement.
Sets focus on an element, such as a form field, so it immediately receives keyboard input. The blur() method removes focus.
- Returns
undefined
Example
#const email = document.querySelector('#email')
email.focus()
console.log(document.activeElement === email)
console.log(document.activeElement.id)
email.blur()
console.log(document.activeElement === document.body)true email true
This example doesnât run in the preview, because it would move focus away from this page and into the exampleâs frame. On a page with an <input id="email"> field, it prints the result shown above. After blur(), focus returns to the document, and document.activeElement points to <body>.
Definition and usage
#The focus() method moves focus to an element, meaning itâs the one that receives key presses. A focused text field shows a blinking cursor, and a focused button reacts to Enter and space. The blur() method does the opposite and removes focus. You can read the currently focused element from document.activeElement.
Focus can go to interactive elements: form fields, buttons, links with an href attribute, and elements with a tabindex attribute. Calling focus() on a plain div or heading does nothing, unless you add tabindex="-1" to it. Such an element can be activated from code, but it doesnât join the Tab keyâs navigation order.
When focus changes, an element gets the focus and blur events, which donât bubble, and focusin and focusout, which bubble and are suited to delegation. By default, the browser scrolls the page so the focused element is visible. The preventScroll: true option turns off that scrolling.
Thoughtful use of focus() improves accessibility: after opening a dialog, move focus into its first field; after closing it, return focus to the button that opened it; and after a failed form submission, point to the first invalid field. Donât move focus without a clear reason, though, since people using the keyboard and screen readers lose their place when you do.
Syntax
#element.focus()
element.focus(options)
element.blur()
document.activeElementParameters
#options
optional object
preventScroll: truesets focus without scrolling the page to the element.
More examples
#const reply = document.querySelector('#reply')
const comment = document.querySelector('#comment')
reply.addEventListener('click', () => comment.focus())
comment.addEventListener('focus', () => console.log('Comment field active'))
comment.addEventListener('blur', () => console.log('Comment field inactive'))
console.log('Active element:', document.activeElement)At the start, focus belongs to the document itself, i.e. <body>. Click âReplyâ, and focus will move to the comment field. Then click next to the field to see the blur event.
const heading = document.querySelector('#lesson-title')
heading.setAttribute('tabindex', '-1')
heading.focus({ preventScroll: true })
console.log(document.activeElement.tagName)
console.log(heading.tabIndex)H2 -1
On a page with the heading <h2 id="lesson-title">, the heading normally doesnât accept focus. tabindex="-1" lets you activate it from code, for example after loading a new lesson, so a screen reader immediately reads out its title. The element doesnât join the Tab keyâs order, though.
Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- After opening a dialog, move focus into it, and return it to the button that opened it after closing. People using the keyboard wonât lose their place on the page that way.
- Use
focusinandfocusoutfor delegating focus events. Thefocusandblurevents donât bubble to parents. - Style the focus look in CSS with
:focus-visible. The outline will appear with keyboard input, not after every mouse click.
Related entries
#- EventTarget.addEventListener()Registers a function thatâs called every time a given event occurs on an element, for example a click.
- Element.scrollIntoView()Scrolls the page and any scrollable containers so the element appears on screen, either instantly or smoothly.
- Element.setAttribute()Sets the value of an elementâs HTML attribute, or adds a new attribute.
- Event.targetThe element on which an event actually occurred, for example the clicked button inside a list.
- Element.toggleAttribute()Adds an attribute when itâs missing, or removes it when itâs present. Works best for boolean attributes, such as hidden or disabled.
Spotted a mistake or missing an example? Write to us.