Element: blur-Ereignis
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Das blur-Ereignis wird ausgelöst, wenn ein Element den Fokus verliert. Das Ereignis wird nicht weitergereicht, jedoch das darauf folgende verwandte focusout-Ereignis wird weitergereicht.
Ein Element verliert den Fokus, wenn ein anderes Element ausgewählt wird.
Ein Element verliert auch den Fokus, wenn ein Stil angewendet wird, der keinen Fokus erlaubt, wie z.B. hidden, oder wenn das Element aus dem Dokument entfernt wird — in beiden Fällen wird der Fokus auf das body-Element (Viewport) verschoben.
Beachten Sie, dass das Verhalten des Browsers unterschiedlich ist, wenn ein fokussiertes Element aus dem Dokument entfernt wird. In Chromium-basierten Browsern löst das Entfernen eines fokussierten Elements ein blur-Ereignis aus, während es in Firefox nicht der Fall ist.
Das Gegenteil von blur ist das focus-Ereignis, das ausgelöst wird, wenn ein Element den Fokus erhält.
Das blur-Ereignis ist nicht abgebrochen werden kann.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("blur", (event) => { })
onblur = (event) => { }
Ereignistyp
Ein FocusEvent. Erbt von UIEvent und Event.
Ereigniseigenschaften
Diese Schnittstelle erbt auch Eigenschaften von ihrem übergeordneten UIEvent und indirekt von Event.
-
Das Element, das den Fokus erhält, falls vorhanden.
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
Ereignisdelegierung
Es gibt zwei Möglichkeiten, die Ereignisdelegierung für dieses Ereignis zu implementieren: durch Verwendung des focusout-Ereignisses oder durch Setzen des useCapture-Parameters 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
| Specification |
|---|
| UI Events # event-type-blur |
| HTML # handler-onblur |
Browser-Kompatibilität
Der Wert von Document.activeElement variiert zwischen den Browsern, während dieses Ereignis behandelt wird (Firefox-Bug 452307): IE10 setzt ihn auf das Element, zu dem der Fokus wechseln wird, während Firefox und Chrome ihn oft auf das body des Dokuments setzen.
Siehe auch
- Die Methode
HTMLElement.blur() - Verwandte Ereignisse:
focus,focusin,focusout - Dieses Ereignis mit
Window-Zielen:blur-Ereignis - Fokussierung: focus/blur