Element: blur event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

See full compatibility

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.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

addEventListener("blur", (event) => { })

onblur = (event) => { }

Event type

A FocusEvent. Inherits from UIEvent and Event.

Event properties

This interface also inherits properties from its parent UIEvent, and indirectly from Event.

FocusEvent.relatedTarget: The element receiving focus, if any.

Examples

Simple example

HTML

html

<form id="form">
  <label>
    Some text:
    <input type="text" placeholder="text input" />
  </label>
  <label>
    Password:
    <input type="password" placeholder="password" />
  </label>
</form>

JavaScript

const password = document.querySelector('input[type="password"]');

password.addEventListener("focus", (event) => {
  event.target.style.background = "pink";
});

password.addEventListener("blur", (event) => {
  event.target.style.background = "";
});

Result

Event delegation

There are two ways of implementing event delegation for this event: by using the focusout event, or by setting the useCapture parameter of addEventListener() to true.

HTML

html

<form id="form">
  <label>
    Some text:
    <input type="text" placeholder="text input" />
  </label>
  <label>
    Password:
    <input type="password" placeholder="password" />
  </label>
</form>

JavaScript

const form = document.getElementById("form");

form.addEventListener(
  "focus",
  (event) => {
    event.target.style.background = "pink";
  },
  true,
);

form.addEventListener(
  "blur",
  (event) => {
    event.target.style.background = "";
  },
  true,
);

Result

Specifications

Specification
UI Events # event-type-blur
HTML # handler-onblur

Browser compatibility

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`blur` event	Chrome – Full support Chrome 1 (Release date: 2008-12-11) footnote Full support	Edge – Full support Edge 12 (Release date: 2015-07-29) footnote Full support	Firefox – No support Firefox 6 – 23 (Release date: 2011-08-16) footnote The interface for this event is `Event`, not `FocusEvent`. Firefox – Full support Firefox 24 (Release date: 2013-09-17) footnote Full support	Opera – Full support Opera 11.6 (Release date: 2011-12-06) footnote Full support	Safari – Full support Safari 3.1 (Release date: 2008-03-18) footnote Full support	Chrome Android – Full support Chrome Android 18 (Release date: 2012-06-27) footnote Full support	Firefox for Android – No support Firefox for Android 6 – 23 (Release date: 2011-08-16) footnote The interface for this event is `Event`, not `FocusEvent`. Firefox for Android – Full support Firefox for Android 24 (Release date: 2013-09-17) footnote Full support	Opera Android – Full support Opera Android 12.1 (Release date: 2012-10-09) footnote Full support	Safari on iOS – Full support Safari on iOS 2 (Release date: 2008-07-11) footnote Full support	Samsung Internet – Full support Samsung Internet 1 (Release date: 2013-04-27) footnote Full support	WebView Android – Full support WebView Android 4.4 (Release date: 2013-12-09) footnote Full support	WebView on iOS – Full support WebView on iOS 2 (Release date: 2008-07-11) footnote Full support

Tip: you can click/tap on a cell for more information.

Full support: Full support
: Has more compatibility info.

The value of Document.activeElement varies across browsers while this event is being handled (Firefox bug 452307): IE10 sets it to the element that the focus will move to, while Firefox and Chrome often set it to the body of the document.

Element: blur event

HTML

JavaScript

Result

HTML

JavaScript

Result

Legend