Element: focusout-Ereignis
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2017 browserübergreifend verfügbar.
Das focusout-Ereignis wird ausgelöst, wenn ein Element den Fokus verloren hat, und zwar nach dem blur-Ereignis. Die beiden Ereignisse unterscheiden sich darin, dass focusout aufsteigt, blur hingegen nicht.
Das Gegenstück zu focusout ist das focusin-Ereignis, das ausgelöst wird, wenn das Element den Fokus erhalten hat.
Das focusout-Ereignis kann nicht abgebrochen werden.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("focusout", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
onfocusout = (event) => { }
Ereignistyp
Ein FocusEvent. Erbt von UIEvent und Event.
Beispiele
Interaktives 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 form = document.getElementById("form");
form.addEventListener("focusin", (event) => {
event.target.style.background = "pink";
});
form.addEventListener("focusout", (event) => {
event.target.style.background = "";
});
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| UI Events # event-type-focusout |
Hinweis: Die UI Events-Spezifikation beschreibt eine Reihenfolge der Fokusereignisse, die sich von der Implementierung in aktuellen Browsern unterscheidet.
Browser-Kompatibilität
Siehe auch
- Verwandte Ereignisse:
blur,focus,focusin - Fokussierung: focus/blur