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 sprudelt, während focus dies nicht tut.

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

Das focusin Ereignis kann nicht abgebrochen werden.

Syntax

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

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

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 UI Events-Spezifikation beschreibt eine Reihenfolge von Fokusereignissen, die von den aktuellen Browsern anders implementiert wird.