Element: blur Ereignis

Das blur-Ereignis wird ausgelöst, wenn ein Element den Fokus verloren hat. Das Ereignis blubbert nicht, jedoch das verwandte focusout Ereignis, das darauf folgt, blubbert.

Ein Element verliert den Fokus, wenn ein anderes Element ausgewählt wird. Ein Element verliert auch den Fokus, wenn ein Stil angewendet wird, der keinen Fokus zulässt, wie hidden, oder wenn das Element aus dem Dokument entfernt wird - in beiden Fällen bewegt sich der Fokus auf das body-Element (Viewport). 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, welches ausgelöst wird, wenn ein Element den Fokus erhalten hat.

Das blur-Ereignis ist nicht abbrechbar.

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 Elternteil 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

Event Delegation

Es gibt zwei Möglichkeiten, die Ereignisdelegation für dieses Ereignis zu implementieren: durch Verwendung des focusout Ereignisses oder durch 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 Standard
# handler-onblur

Browser-Kompatibilität

BCD tables only load in the browser

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

Siehe auch