HTMLElement.focus() — Methode · JavaScript-Referenz

Signatur

HTMLElement.prototype.focus(options)

Beschreibung

focus() verschiebt den Fokus per Skript auf ein Element. Danach landen Tastatureingaben dort, und document.activeElement zeigt auf dieses Element. Der Browser löst am Element focus und focusin aus, am zuvor fokussierten Element blur und focusout.

Typische Einsatzfälle:

das erste Eingabefeld eines Formulars oder Dialogs fokussieren
nach einem Validierungsfehler zum fehlerhaften Feld springen
den Fokus nach dem Schließen eines Modals an den auslösenden Button zurückgeben
bei Single-Page-Apps nach einem Routenwechsel die neue Überschrift fokussieren

Fokussierbar sind von Haus aus nur interaktive Elemente, also <input>, <button>, <select>, <textarea>, <a href> sowie Elemente mit contenteditable. Andere Elemente wie <div> oder <h1> brauchen ein tabindex-Attribut. Mit tabindex="-1" lässt sich ein Element per Skript fokussieren, ohne dass es in die Tab-Reihenfolge aufgenommen wird. Bei deaktivierten (disabled), versteckten (display: none, visibility: hidden) oder inert-Elementen tut der Aufruf nichts und wirft auch keinen Fehler.

Standardmäßig scrollt der Browser das Element in den sichtbaren Bereich. Mit { preventScroll: true } lässt sich das verhindern. Mit focusVisible steuern Sie, ob der Fokusring (:focus-visible) angezeigt wird.

Parameter

Name	Typ	Default	Beschreibung
$options	object	{}	Optionales Objekt, das steuert, wie fokussiert wird.
$options.preventScroll	boolean	false	Bei `true` scrollt der Browser das Element nicht in den sichtbaren Bereich.
$options.focusVisible	boolean	vom Browser bestimmt	Bei `true` wird der Fokusring erzwungen, bei `false` unterdrückt. Ohne Angabe entscheidet der Browser anhand heuristischer Regeln, z. B. je nachdem, ob zuletzt Tastatur oder Maus benutzt wurde.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Ob das Fokussieren geklappt hat, prüfen Sie mit document.activeElement === element.

Beispiele

Suchfeld beim Laden fokussieren

// HTML: <input id="suche" type="search" placeholder="Suchen …">
const suche = document.getElementById('suche');
suche.focus();
console.log(document.activeElement === suche);

true

Zum ersten ungültigen Formularfeld springen

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

form.addEventListener('submit', (event) => {
  const ungueltig = form.querySelector(':invalid');
  if (ungueltig) {
    event.preventDefault();
    // Fokus setzen, ohne dass die Seite springt, danach sanft scrollen
    ungueltig.focus({ preventScroll: true });
    ungueltig.scrollIntoView({ behavior: 'smooth', block: 'center' });
  }
});

Modal öffnen und den Fokus danach zurückgeben

const dialog = document.querySelector('#dialog');
const oeffnen = document.querySelector('#oeffnen');
const schliessen = dialog.querySelector('.schliessen');
let vorherFokussiert = null;

oeffnen.addEventListener('click', () => {
  vorherFokussiert = document.activeElement;
  dialog.hidden = false;
  // Das Element muss sichtbar sein, bevor es fokussiert werden kann
  schliessen.focus();
});

schliessen.addEventListener('click', () => {
  dialog.hidden = true;
  vorherFokussiert?.focus();
});

Nicht interaktives Element per tabindex fokussierbar machen

// Nach einem SPA-Routenwechsel die neue Überschrift für Screenreader fokussieren
const ueberschrift = document.querySelector('main h1');
ueberschrift.setAttribute('tabindex', '-1'); // per Skript fokussierbar, aber nicht per Tab erreichbar
ueberschrift.focus({ focusVisible: false });
console.log(document.activeElement.tagName);

H1

// Wichtig · Fallstricke

Kein Fehler bei Misserfolg: Bei nicht fokussierbaren, deaktivierten, unsichtbaren oder inert-Elementen passiert einfach nichts. Deshalb nach dem Aufruf document.activeElement prüfen.
Zeitpunkt: Ein Element, das gerade erst sichtbar gemacht oder eingefügt wurde, lässt sich in manchen Fällen, etwa während einer CSS-Übergangsanimation oder bei display: none im selben Frame, noch nicht fokussieren. Dann hilft requestAnimationFrame() oder das Warten auf transitionend.
Seitenfokus: Hat das Browserfenster bzw. der Tab selbst keinen Fokus, wird das Element zwar zu document.activeElement, die Ereignisse focus/blur werden aber unter Umständen erst ausgelöst, wenn das Fenster wieder aktiv wird. In iframes gelten zusätzliche Einschränkungen.
Mobile Browser: iOS Safari öffnet die Bildschirmtastatur nur, wenn focus() direkt in einem vom Nutzer ausgelösten Ereignis-Handler (z. B. click) aufgerufen wird, nicht nach setTimeout oder nach einem await.
Barrierefreiheit: Den Fokus nicht ungefragt verschieben, denn das verwirrt Tastatur- und Screenreader-Nutzer. autofocus und focus() beim Seitenaufruf nur gezielt einsetzen. Einen sichtbaren Fokusring nicht dauerhaft mit outline: none entfernen.
Kompatibilität: focus() selbst funktioniert in allen Browsern. preventScroll wird in allen modernen Browsern unterstützt (Safari ab 15). focusVisible ist neu (Firefox 104, Chrome/Edge 135 in Kombination, Safari 18.4) und wird von älteren Browsern ignoriert.
Auch SVGElement und MathMLElement haben focus(), weil die Methode über das Mixin HTMLOrSVGElement definiert ist.

Siehe auch

HTMLElement.blur() Document.activeElement HTMLElement.tabIndex Element.scrollIntoView() HTMLElement.inert