Element: focus-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 focus-Ereignis wird ausgelöst, wenn ein Element den Fokus erhält. Das Ereignis breitet sich nicht nach oben aus, das anschließend ausgelöste, zugehörige focusin-Ereignis hingegen schon.
Das Gegenstück zu focus ist das blur-Ereignis, das ausgelöst wird, wenn das Element den Fokus verliert.
Das focus-Ereignis kann nicht abgebrochen werden.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("focus", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
onfocus = (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, eine Ereignisdelegation für dieses Ereignis zu implementieren: Verwenden Sie das focusin-Ereignis oder setzen Sie den useCapture-Parameter 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-focus |
| HTML # handler-onfocus |
Browser-Kompatibilität
Siehe auch
- Die Methode
HTMLElement.focus() - Verwandte Ereignisse:
blur,focusin,focusout - Dieses Ereignis für
Window-Ziele:focus-Ereignis - Fokussierung: focus/blur