Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Element: focusin-Ereignis

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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.

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

onfocusin = (event) => { }

Ereignistyp

Ein FocusEvent. Erbt von UIEvent und Event.

Event UIEvent FocusEvent

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

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 Fokusereignisse, die sich von der unterscheidet, die aktuelle Browser implementieren.

Browser-Kompatibilität

Siehe auch