HTMLElement.blur() — Methode · JavaScript-Referenz

Signatur

HTMLElement.prototype.blur()

Beschreibung

Die Methode blur() nimmt einem Element den Tastaturfokus weg. Das wirkt nur, wenn das Element gerade fokussiert ist, also document.activeElement === element gilt. Sonst passiert nichts. Danach verweist document.activeElement normalerweise auf document.body (oder auf null, wenn es keinen Body gibt).

Beim Entfernen des Fokus löst der Browser die Ereignisse blur und focusout auf dem Element aus. Das Ereignis blur steigt nicht im DOM-Baum auf, focusout dagegen schon. Einen Ereignis-Listener für focusout kann man deshalb auch auf einem Elternelement registrieren, etwa auf einem Formular.

Typische Einsatzfälle:

Die Bildschirmtastatur auf Mobilgeräten schließen, nachdem ein Formular abgeschickt wurde.
Ein Eingabefeld verlassen, sobald ein Wert per Enter bestätigt wurde.
Den Fokus nach einem Mausklick von einem Button entfernen, damit der Fokus-Rahmen nicht stehen bleibt.

Zur Barrierefreiheit: blur() legt nicht fest, wohin der Fokus als Nächstes geht. Tastatur- und Screenreader-Nutzende verlieren dadurch leicht die Orientierung. Meist ist es besser, gezielt mit focus() auf ein sinnvolles Ziel zu wechseln.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Eingabe mit Enter bestätigen und Feld verlassen

const input = document.querySelector('#suche');

input.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    event.preventDefault();
    console.log('Suche nach:', input.value);
    input.blur(); // schließt auf Mobilgeräten auch die Bildschirmtastatur
  }
});

input.addEventListener('blur', () => {
  console.log('Suchfeld hat den Fokus verloren');
});

Suche nach: javascript Suchfeld hat den Fokus verloren

Prüfen, wohin der Fokus nach blur() geht

const field = document.createElement('input');
document.body.append(field);

field.focus();
console.log(document.activeElement === field); // true

field.blur();
console.log(document.activeElement === document.body); // true

true true

Fokus des aktuell aktiven Elements entfernen

// Allgemeine Hilfsfunktion, z. B. vor dem Öffnen eines Overlays
const clearFocus = () => {
  const active = document.activeElement;
  if (active instanceof HTMLElement && active !== document.body) {
    active.blur();
  }
};

document.querySelector('#absenden').addEventListener('click', async () => {
  clearFocus();
  await fetch('/api/speichern', { method: 'POST' });
  console.log('Gespeichert, Fokus entfernt');
});

Gespeichert, Fokus entfernt

Fokusverlust in einem Formular per focusout überwachen

const form = document.querySelector('form');

// Das Ereignis focusout steigt im DOM auf, ein einziger Listener am Formular reicht
form.addEventListener('focusout', (event) => {
  console.log(`Feld verlassen: ${event.target.name}`);
});

form.elements.email.focus();
form.elements.email.blur();

Feld verlassen: email

// Wichtig · Fallstricke

Wirkt nur beim fokussierten Element: Wird blur() auf einem Element aufgerufen, das gerade keinen Fokus hat, passiert nichts. Es wird auch kein Ereignis ausgelöst.
Kein Fokusziel: Der Fokus fällt auf document.body zurück. Die nächste Betätigung von Tab startet in vielen Browsern dann an der Position des zuvor fokussierten Elements, das ist aber nicht in allen Browsern gleich. Soll der Fokus an eine bestimmte Stelle, verwende gezielt focus().
Barrierefreiheit: Entferne den Fokus nicht pauschal, etwa per onfocus="this.blur()". Tastaturnutzende können das Element dann gar nicht mehr erreichen. Möchtest du nur den Fokus-Rahmen bei Mausklicks ausblenden, nutze in CSS :focus-visible.
Endlosschleifen vermeiden: Rufst du in einem blur-Listener focus() auf, und in einem anderen Listener wieder blur(), können sich die Ereignisse gegenseitig endlos auslösen.
iframes: Hat ein <iframe> den Fokus, ist im übergeordneten Dokument das Element <iframe> selbst das aktive Element (document.activeElement). Mit iframe.blur() lässt sich der Fokus daraus je nach Browser nicht immer zuverlässig entfernen.
Kompatibilität: Wird von allen Browsern unterstützt. Die Methode gibt es auch an SVGElement und MathMLElement (über das Mixin HTMLOrSVGElement) sowie an window. window.blur() wird von modernen Browsern jedoch meist ignoriert.

Siehe auch

HTMLElement.focus() Document.activeElement Document.hasFocus() FileSystemEntry.toURL() HTMLElement.click()