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 July 2015.
Das blur
-Ereignis wird ausgelöst, wenn ein Element den Fokus verloren hat. Das Ereignis blubbert nicht, jedoch das verwandte focusout
Ereignis, das darauf folgt, blubbert.
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 zulässt, wie hidden
, oder wenn das Element aus dem Dokument entfernt wird - in beiden Fällen bewegt sich der Fokus auf das body
-Element (Viewport).
Beachten Sie jedoch, dass blur
nicht ausgelöst wird, wenn ein fokussiertes Element aus dem Dokument entfernt wird.
Das Gegenteil von blur
ist das focus
Ereignis, welches ausgelöst wird, wenn ein Element den Fokus erhalten hat.
Das blur
-Ereignis ist nicht abbrechbar.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
, oder setzen Sie eine Event-Handler-Eigenschaft.
addEventListener("blur", (event) => {});
onblur = (event) => {};
Ereignistyp
Ein FocusEvent
. Erbt von UIEvent
und Event
.
Ereigniseigenschaften
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
Event Delegation
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
Specification |
---|
UI Events # event-type-blur |
HTML Standard # handler-onblur |
Browser-Kompatibilität
BCD tables only load in the browser
Der Wert von Document.activeElement
variiert je nach Browser, während dieses Ereignis behandelt wird (Firefox Bug 452307): IE10 setzt ihn auf das Element, zu dem der Fokus wechselt, während Firefox und Chrome ihn oft auf den body
des Dokuments setzen.
Siehe auch
- Die
HTMLElement.blur()
Methode - Verwandte Ereignisse:
focus
,focusin
,focusout
- Dieses Ereignis bei
Window
-Zielen:blur
Ereignis - Fokussierung: focus/blur