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 |
Examples
Live example
This example changes the appearance of a document when it loses focus. It uses addEventListener()
to monitor focus
and blur
events.
HTML
<p id="log">Click on this document to give it focus.</p>
CSS
.paused {
background: #ddd;
color: #555;
}
JavaScript
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);
Result
Specifications
Specification | Status | Comment |
---|---|---|
UI Events | Working Draft | Added info that this event is composed. |
Document Object Model (DOM) Level 3 Events Specification | Obsolete | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
blur event
|
Chrome
Full support 5 |
Edge
Full support 12 |
Firefox Full support Yes |
IE
Full support Yes |
Opera
Full support 12.1 |
Safari
Full support 5.1 |
WebView Android
Full support Yes |
Chrome Android
Full support 18 |
Firefox Android
Full support Yes |
Opera Android
Full support 12.1 |
Safari iOS
Full support 5.1 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
- See implementation notes.'
- See implementation notes.
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.
See also
Window: blur event by Mozilla Contributors is licensed under CC-BY-SA 2.5.