Element: blur-Ereignis
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Das blur-Ereignis wird ausgelöst, wenn ein Element den Fokus verliert. Das Ereignis wird nicht in der DOM-Hierarchie nach oben weitergegeben; das anschließend ausgelöste, verwandte Ereignis focusout dagegen schon.
Ein Element verliert den Fokus, wenn ein anderes Element ausgewählt wird. Es verliert den Fokus auch, wenn ein Stil angewendet wird, der keinen Fokus zulässt, etwa hidden, oder wenn das Element aus dem Dokument entfernt wird. In beiden Fällen wechselt der Fokus zum body-Element (Viewport). Beachten Sie, dass sich Browser unterschiedlich verhalten, wenn ein fokussiertes Element aus dem Dokument entfernt wird: In Chromium-basierten Browsern löst dies ein blur-Ereignis aus, in Firefox hingegen nicht.
Das Gegenstück zu blur ist das Ereignis focus, das ausgelöst wird, wenn das Element den Fokus erhält.
Das blur-Ereignis kann nicht abgebrochen werden.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("blur", (event) => { })
Alternativ können Sie die Event-Handler-Eigenschaft der Schnittstelle belegen:
onblur = (event) => { }
Ereignistyp
Ein FocusEvent. Es erbt von UIEvent und Event.
Beispiele
Einfaches Beispiel
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 = "";
});
Ergebnis
Ereignisdelegation
Es gibt zwei Möglichkeiten, die Ereignisdelegation für dieses Ereignis umzusetzen: Verwenden Sie das Ereignis focusout oder setzen Sie den Parameter useCapture von addEventListener() auf 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,
);
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| UI Events # event-type-blur |
| HTML # handler-onblur |
Browser-Kompatibilität
Der Wert von Document.activeElement unterscheidet sich zwischen Browsern, während dieses Ereignis verarbeitet wird (Firefox-Bug 452307): IE10 setzt ihn auf das Element, zu dem der Fokus wechseln wird, während Firefox und Chrome ihn häufig auf das body-Element des Dokuments setzen.
Siehe auch
- Die Methode
HTMLElement.blur() - Verwandte Ereignisse:
focus,focusin,focusout - Dieses Ereignis für
Window-Ziele:blur-Ereignis - Fokussierung: focus/blur