Element: blur event
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 however that blur
is not fired when a focused element is removed from the document.
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
Examples
Simple example
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
<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 Standard # handler-onblur |
Browser compatibility
BCD tables only load in the browser
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.
See also
- The
HTMLElement.blur()
method - Related events:
focus
,focusin
,focusout
- This event on
Window
targets:blur
event - Focusing: focus/blur