The blur
event fires when an element has lost focus.
The opposite of blur
is focus
.
This event is not cancelable and does not bubble.
The blur
event fires when an element has lost focus.
The opposite of blur
is focus
.
This event is not cancelable and does not bubble.
Use the event name in methods like addEventListener()
, or set an event handler property.
js
addEventListener("blur", (event) => {}); onblur = (event) => {};
A FocusEvent
. Inherits from Event
.
This interface also inherits properties from its parent UIEvent
, and indirectly from Event
.
FocusEvent.relatedTarget
An EventTarget
representing a secondary target for this event. In some cases (such as when tabbing in or out a page), this property may be set to null
for security reasons.
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; }
js
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 |
HTML Standard # handler-onblur |
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 onwindow 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 onwindow 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 (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.
© 2005–2023 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