Element: focusin-Ereignis

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2017 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

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 durch die Elementhierarchie aufsteigt, focus dagegen nicht.

Das Gegenstück zu focusin ist das focusout-Ereignis, das ausgelöst wird, wenn das Element den Fokus verloren hat.

Das focusin-Ereignis kann nicht abgebrochen werden.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie der Event-Handler-Eigenschaft der Schnittstelle eine Funktion zuweisen:

onfocusin = (event) => { }

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

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

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

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

Ergebnis

Spezifikationen

Spezifikation
UI Events # event-type-focusin

Hinweis: Die Spezifikation UI Events beschreibt eine Reihenfolge der Fokusereignisse, die sich von der Implementierung aktueller Browser unterscheidet.