Element: focusout Ereignis

Das focusout-Ereignis wird ausgelöst, wenn ein Element den Fokus verloren hat, nach dem blur-Ereignis. Die beiden Ereignisse unterscheiden sich darin, dass focusout aufsteigt, während blur dies nicht tut.

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

Das focusout-Ereignis kann nicht abgebrochen werden.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener().

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

Ereignistyp

Ereigniseigenschaften

Diese Schnittstelle erbt auch Eigenschaften von ihrem übergeordneten UIEvent und indirekt von Event.

FocusEvent.relatedTarget

Das Element, das den Fokus erhält, 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-focusout

Hinweis: Die UI Events-Spezifikation beschreibt eine Reihenfolge von Fokusereignissen, die von den aktuellen Browsern unterschiedlich implementiert wird.

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
focusout event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support

Siehe auch