Element: focusin-Ereignis

Das focusin-Ereignis wird ausgelöst, wenn ein Element den Fokus erhalten hat, nach dem focus-Ereignis. Die beiden Ereignisse unterscheiden sich darin, dass focusin nach oben bubbelt, während focus dies nicht tut.

Das Gegenteil von focusin ist das focusout-Ereignis, das ausgelöst wird, wenn das Element den Fokus verloren hat.

Das focusin-Ereignis ist nicht abbrechbar.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

addEventListener("focusin", (event) => { })
onfocusin = (event) => { }

Ereignistyp

Ein FocusEvent. Erbt von UIEvent und Event.

Ereigniseigenschaften

Diese Schnittstelle erbt auch Eigenschaften von ihrem Elternobjekt UIEvent und indirekt von Event .

FocusEvent.relatedTarget

Das Element, das den Fokus verliert, falls vorhanden.

Beispiele

Live-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

Browser-Kompatibilität

Siehe auch

• Verwandte Ereignisse: blur, focus, focusout
• Fokusieren: focus/blur