Element: blur-Ereignis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das blur-Ereignis tritt ein, wenn ein Element den Fokus verloren hat. Das Ereignis steigt nicht auf, aber das nachfolgende focusout-Ereignis steigt auf.

Ein Element verliert den Fokus, wenn ein anderes Element ausgewählt wird. Ein Element verliert auch dann den Fokus, wenn ein Stil angewendet wird, der keinen Fokus erlaubt, wie z.B. hidden, oder wenn das Element aus dem Dokument entfernt wird - in beiden Fällen verschiebt sich der Fokus auf das body-Element (Ansichtsfenster). Beachten Sie jedoch, dass blur nicht ausgelöst wird, wenn ein fokussiertes Element aus dem Dokument entfernt wird.

Das Gegenteil von blur ist das focus-Ereignis, das ausgelöst wird, wenn das Element Fokus erhalten hat.

Das blur-Ereignis kann nicht abgebrochen werden.

Syntax

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

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

onblur = (event) => { }

Ereignistyp

Ein FocusEvent. Erbt von UIEvent und Event.

Event UIEvent FocusEvent

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

Einfaches 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 password = document.querySelector('input[type="password"]');

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

password.addEventListener("blur", (event) => {
  event.target.style.background = "";
});

Ergebnis

Ereignisdelegation

Es gibt zwei Möglichkeiten, die Ereignisdelegation für dieses Ereignis zu implementieren: durch die Verwendung des focusout-Ereignisses oder durch das Setzen des useCapture-Parameters von addEventListener() auf true.

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(
  "focus",
  (event) => {
    event.target.style.background = "pink";
  },
  true,
);

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

Ergebnis

Spezifikationen

Specification
UI Events
# event-type-blur
HTML
# handler-onblur

Browser-Kompatibilität

Der Wert von Document.activeElement variiert je nach Browser, während dieses Ereignis verarbeitet wird (Firefox Fehler 452307): IE10 setzt es auf das Element, zu dem der Fokus wechselt, während Firefox und Chrome es oft auf das body des Dokuments setzen.

Siehe auch