The blur
event fires when an element has lost focus.
The opposite of blur
is focus
.
Bubbles | No |
---|---|
Cancelable | No |
Interface | FocusEvent |
Event handler property | onblur |
Sync / Async | Sync |
Composed | Yes |
The blur
event fires when an element has lost focus.
The opposite of blur
is focus
.
Bubbles | No |
---|---|
Cancelable | No |
Interface | FocusEvent |
Event handler property | onblur |
Sync / Async | Sync |
Composed | Yes |
This example changes the appearance of a document when it loses focus. It uses addEventListener()
to monitor focus
and blur
events.
<p id="log">Click on this document to give it focus.</p>
.paused { background: #ddd; color: #555; }
function pause() { document.body.classList.add('paused'); log.textContent = 'FOCUS LOST!'; } function play() { document.body.classList.remove('paused'); log.textContent = 'This document has focus. Click outside the document to lose focus.'; } const log = document.getElementById('log'); window.addEventListener('blur', pause); window.addEventListener('focus', play);
Specification |
---|
UI Events # event-type-blur |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
blur_event |
5
|
12
|
6
["Apart from firing the event on
window as other browsers do, Firefox also fires the event on the
document object. See
bug 1228802.", "Before Firefox 24, the interface for this event is a plain
Event , not
FocusEvent ."]
|
11
|
≤12.1
|
5.1
|
≤37
|
18
|
6
["Apart from firing the event on
window as other browsers do, Firefox also fires the event on the
document object. See
bug 1228802.", "Before Firefox 24, the interface for this event is a plain
Event , not
FocusEvent ."]
|
≤12.1
|
5
|
1.0
|
The value of Document.activeElement
varies across browsers while this event is being handled (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.
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Window/blur_event