Element: focus Event

Baseline Widely available

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

Das focus-Ereignis wird ausgelöst, wenn ein Element den Fokus erhalten hat. Das Ereignis wird nicht im DOM weitergeleitet, aber das zugehörige focusin-Ereignis, das darauf folgt, wird weitergeleitet.

Das Gegenstück zu focus ist das blur-Ereignis, das ausgelöst wird, wenn das Element den Fokus verloren hat.

Das focus-Ereignis kann nicht abgebrochen werden.

Syntax

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

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

onfocus = (event) => { }

Ereignistyp

Ein FocusEvent. Erbt von UIEvent und Event.

Ereigniseigenschaften

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

FocusEvent.relatedTarget: Das Element, das den Fokus verliert, 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

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

Ereignisdelegierung

Es gibt zwei Möglichkeiten, die Ereignisdelegierung für dieses Ereignis zu implementieren: durch Verwendung des focusin-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

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-focus
HTML # handler-onfocus

Browser-Kompatibilität

Siehe auch

Die HTMLElement.focus()-Methode
Verwandte Ereignisse: blur, focusin, focusout
Dieses Ereignis auf Window-Ziele: focus Ereignis
Fokussieren: focus/blur

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden