Element: blur event
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 ist nicht auf Empfehlungen weiterleitbar, jedoch das zugehörige focusout-Ereignis, das darauf folgt.
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 hidden, oder wenn das Element aus dem Dokument entfernt wird — in beiden Fällen bewegt sich der Fokus auf das body-Element (Ansichtsfenster).
Beachten Sie, dass das Verhalten des Browsers unterschiedlich ist, wenn ein fokussiertes Element aus dem Dokument entfernt wird. In auf 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, welches ausgelöst wird, wenn das Element den Fokus erhält.
Das blur-Ereignis ist nicht abbrechbar.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignisbehandlereigenschaft.
addEventListener("blur", (event) => { })
onblur = (event) => { }
Ereignistyp
Ein FocusEvent. 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 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
| Spezifikation |
|---|
| 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-Fehler 452307): IE10 setzt es auf das Element, zu dem der Fokus wechseln wird, während Firefox und Chrome es oft auf den body des Dokuments setzen.
Siehe auch
- Die Methode
HTMLElement.blur() - Verwandte Ereignisse:
focus,focusin,focusout - Dieses Ereignis auf
Window-Zielen:blur-Ereignis - Fokussierung: focus/blur