Element: focusin Ereignis

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Mehr erfahren
Vollständige Kompatibilität anzeigen

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.