Widely available Supported across all major browsers. Safe to use in production.

Focus events

The blur event fires when an element has lost focus. The event does not bubble, but the related focusout event that follows does bubble.

An element will lose focus if another element is selected. An element will also lose focus if a style that does not allow focus is applied, such as hidden, or if the element is removed from the document — in both of these cases focus moves to the body element (viewport). Note that browser behavior differs when a focused element is removed from the document. In Chromium-based browsers, removing a focused element triggers a blur event, while in Firefox it does not.

The opposite of blur is the focus event, which fires when the element has received focus.

The blur event is not cancelable.

Other

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
FocusEvent
26
12
24
7
26
7
blur_event

The blur event fires when an element has lost focus. The event does not bubble, but the related Element/focusout_event event that follows does bubble.
1
12
24
3.1
18
2
focus_event

The focus event fires when an element has received focus. The event does not bubble, but the related Element/focusin_event event that follows does bubble.
1
12
24
3.1
18
2
focusin_event

The focusin event fires when an element has received focus, after the Element/focus_event event. The two events differ in that focusin bubbles, while focus does not.
1
12
52
5
18
4.2
focusout_event

The focusout event fires when an element has lost focus, after the Element/blur_event event. The two events differ in that focusout bubbles, while blur does not.
1
12
52
5
18
4.2
FocusEvent

The FocusEvent() constructor returns a newly created FocusEvent object with an optional EventTarget. When the event has both a source and a destination, the relatedTarget value must be set to the other target.
26
12
24
7
26
7
relatedTarget

The relatedTarget read-only property of the FocusEvent interface is the secondary target, depending on the type of event:
26
12
24
7
26
7
blur

The HTMLElement.blur() method removes keyboard focus from the current element.
1
12
1.5
3
18
1
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.
1
12
1.5
3
18
1
focus (options focusVisible parameter)

`options.focusVisible` parameter
145
145
104
18.4
145
18.4
focus (options preventScroll parameter)

`options.preventScroll` parameter
64
17
68
15
15.5
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (24)
Implementation note
  • The interface for this event is `Event`, not `FocusEvent`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (24)
Implementation note
  • The interface for this event is `Event`, not `FocusEvent`.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • The `onfocusin` event handler property is not supported. To listen to this event, use `element.addEventListener('focusin', function() {});`.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • The `onfocusin` event handler property is not supported. To listen to this event, use `element.addEventListener('focusin', function() {});`.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • The `onfocusin` event handler property is not supported. To listen to this event, use `element.addEventListener('focusin', function() {});`.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • The `onfocusin` event handler property is not supported. To listen to this event, use `element.addEventListener('focusin', function() {});`.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • The `onfocusout` event handler property is not supported. To listen to this event, use `element.addEventListener('focusout', function() {});`.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • The `onfocusout` event handler property is not supported. To listen to this event, use `element.addEventListener('focusout', function() {});`.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • The `onfocusout` event handler property is not supported. To listen to this event, use `element.addEventListener('focusout', function() {});`.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • The `onfocusout` event handler property is not supported. To listen to this event, use `element.addEventListener('focusout', function() {});`.
Notes 1 item(s)
Implementation note
  • If there's no hardware keyboard connected and the user has not yet interacted with the page, then calling `focus()` on an `<input>` element has no effect (for example, the element does not match the `:focus` selector).

Syntax

JAVASCRIPT 
const input = document.querySelector('input');
input.addEventListener('focus', () => {
  input.style.borderColor = 'blue';
});
input.addEventListener('blur', () => {
  input.style.borderColor = '';
});

Live demo

Focusevent

Focus / blur event in element. Focusread / loss detect.

PreviewFullscreen

Focusin / Focusout(baring with)

Focus/blur is baring that, focusin/focusout is baring.

PreviewFullscreen

CSS :focus-visible

ki-bo-doperation time. onlyfocusring display CSS pseudoclass.

PreviewFullscreen

Use cases

  • Using Focus events

    The blur event fires when an element has lost focus.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Verify how this element is announced by screen readers.

Related links