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 wird nicht nach oben weitergereicht, jedoch das darauf folgende verwandte focusin-Ereignis wird nach oben weitergereicht.
Das Gegenteil von focus ist das blur-Ereignis, welches ausgelöst wird, wenn das Element den Fokus verloren hat.
Das focus-Ereignis kann nicht abgebrochen werden.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder legen Sie eine Ereignisbehandler-Eigenschaft fest.
addEventListener("focus", (event) => { })
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
Ereignisdelegierung
Es gibt zwei Möglichkeiten, die Ereignisdelegierung für dieses Ereignis zu implementieren: durch die Verwendung des focusin-Ereignisses oder indem der useCapture-Parameter von addEventListener() auf true gesetzt wird.
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
HTMLElement.focus()-Methode - Verwandte Ereignisse:
blur,focusin,focusout - Dieses Ereignis bei
Window-Zielen:focus-Ereignis - Fokusierung: focus/blur