Signatur
Beschreibung
Die Eigenschaft autofocus spiegelt das globale HTML-Attribut autofocus wider. Liefert sie true, ist das Attribut am Element gesetzt. Wenn du ihr einen Wert zuweist, wird das Attribut hinzugefügt (true) oder entfernt (false).
Wichtig: Das Attribut wirkt nur, wenn das Dokument geladen wird oder ein <dialog> bzw. Popover geöffnet wird. Setzt du autofocus = true nachträglich per JavaScript, wird das Element dadurch nicht sofort fokussiert – dafür gibt es HTMLElement.focus(). In der Praxis setzt man die Eigenschaft deshalb vor allem auf dynamisch erzeugten Elementen, bevor sie in einen Dialog eingefügt werden, oder man fragt sie ab, um festzustellen, welches Element als Startfokus vorgesehen ist.
Pro Dokument bzw. pro Dialog sollte nur ein Element autofocus tragen. Bei mehreren Kandidaten erhält in der Regel das erste im Dokument den Fokus.
Rückgabewert
true, wenn das Attribut autofocus am Element vorhanden ist, sonst false. Zuweisbar: true setzt das Attribut, false entfernt es.Beispiele
Attribut abfragen und setzen
// HTML: <input id="suche" type="search" autofocus>
const suche = document.getElementById('suche');
console.log(suche.autofocus);
suche.autofocus = false;
console.log(suche.hasAttribute('autofocus'));
suche.autofocus = true;
console.log(suche.getAttribute('autofocus'));Startfokus in einem dynamisch erzeugten Dialog
const dialog = document.createElement('dialog');
const name = document.createElement('input');
name.placeholder = 'Ihr Name';
name.autofocus = true; // wird beim Öffnen des Dialogs fokussiert
const ok = document.createElement('button');
ok.textContent = 'OK';
ok.addEventListener('click', () => dialog.close());
dialog.append(name, ok);
document.body.append(dialog);
dialog.showModal();
console.log(document.activeElement === name);Nachträgliches Setzen fokussiert nicht – focus() verwenden
const feld = document.querySelector('#email');
feld.autofocus = true;
console.log(document.activeElement === feld); // false – kein Effekt nach dem Laden
feld.focus({ preventScroll: true });
console.log(document.activeElement === feld);// Wichtig · Fallstricke
- Kein Sofort-Effekt: Das Setzen von
autofocusnach dem Seitenaufbau verschiebt den Fokus nicht. Nutzeelement.focus(). - Barrierefreiheit: Automatischer Fokus kann Screenreader-Nutzer verwirren, weil Inhalte vor dem fokussierten Element übersprungen werden, und auf Mobilgeräten ungewollt die Bildschirmtastatur öffnen. Sparsam einsetzen.
- Browser ignorieren
autofocusin eingebetteten Frames anderer Herkunft (cross-originiframe) und oft auch, wenn der Benutzer bereits ein anderes Element fokussiert hat. - Kompatibilität: Für
<input>,<button>,<select>und<textarea>seit Langem unterstützt; als globale Eigenschaft auf allenHTMLElements (z. B.<div tabindex=\"0\">) erst in neueren Versionen (u. a. Firefox ab 110, Safari ab 15.4). Nicht fokussierbare Elemente erhalten trotzautofocuskeinen Fokus.