Element: focusin Ereignis

Das focusin Ereignis tritt auf, wenn ein Element den Fokus erhalten hat, nach dem focus Ereignis. Die beiden Ereignisse unterscheiden sich darin, dass focusin durchblubbert, 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 abbruchbar.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener().

js
addEventListener("focusin", (event) => {});

Ereignistyp

Ein FocusEvent. Erbt von UIEvent und Event.

Event UIEvent FocusEvent

Ereigniseigenschaften

Dieses Interface erbt auch Eigenschaften von seinem übergeordneten UIEvent und indirekt von Event.

FocusEvent.relatedTarget

Das Element, das den Fokus verliert, falls vorhanden.

Beispiele

Live-Beispiel

HTML

html
<form id="form">
  <label>
    Some text:
    <input type="text" placeholder="text input" />
  </label>
  <label>
    Password:
    <input type="password" placeholder="password" />
  </label>
</form>

JavaScript

js
const form = document.getElementById("form");

form.addEventListener("focusin", (event) => {
  event.target.style.background = "pink";
});

form.addEventListener("focusout", (event) => {
  event.target.style.background = "";
});

Ergebnis

Spezifikationen

Specification
UI Events
# event-type-focusin

Hinweis: Die UI Events Spezifikation beschreibt eine Reihenfolge der Fokus-Ereignisse, die von den aktuellen Browsern anders implementiert wird.

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch