SVGElement.autofocus — Eigenschaft · JavaScript-Referenz

Signatur

SVGElement.autofocus

Beschreibung

Die Eigenschaft autofocus des SVGElement-Interfaces spiegelt das globale Attribut autofocus wider. Ist es gesetzt, versucht der Browser, das Element nach dem Einfügen ins Dokument bzw. nach dem Laden der Seite automatisch zu fokussieren. Wie bei HTMLElement.autofocus gilt: Das Lesen liefert true, wenn das Attribut vorhanden ist, und false, wenn es fehlt. Das Setzen auf true fügt ein leeres Attribut autofocus="" hinzu, false entfernt es.

Sinnvoll ist das bei interaktiven SVG-Elementen, die per Tastatur bedienbar sein sollen, etwa ein <a>-Link in einer Grafik oder ein Element mit tabindex="0", das als eigener Steuerknopf dient. Damit der Fokus tatsächlich gesetzt wird, muss das Element fokussierbar sein. Ein einfaches <rect> ohne tabindex kann den Fokus nicht annehmen.

Wichtig: Der automatische Fokus wird nur einmal ausgewertet, wenn das Element ins Dokument gelangt, und nur dann, wenn noch kein anderes Element fokussiert ist. Ein nachträgliches el.autofocus = true an einem Element, das schon im Dokument steht, verschiebt den Fokus nicht. Dafür gibt es el.focus().

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Attribut autofocus gesetzt ist, sonst false. Die Eigenschaft ist les- und schreibbar.

Beispiele

Attribut auslesen

// <svg><a id="start" href="#info" autofocus><text x="10" y="20">Start</text></a></svg>
const link = document.querySelector('#start');
console.log(link.autofocus);
console.log(link.getAttribute('autofocus'));

true ""

Dynamisch erzeugtes SVG-Element mit Autofokus einfügen

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');

const button = document.createElementNS(SVG_NS, 'circle');
button.setAttribute('cx', '50');
button.setAttribute('cy', '50');
button.setAttribute('r', '20');
button.setAttribute('tabindex', '0'); // macht das Element fokussierbar
button.autofocus = true;               // vor dem Einfügen setzen!

svg.append(button);

requestAnimationFrame(() => {
  console.log(document.activeElement === button);
});

true (sofern vorher kein anderes Element fokussiert war)

Autofokus entfernen und Fokus manuell setzen

const el = document.querySelector('svg [autofocus]');
el.autofocus = false;
console.log(el.hasAttribute('autofocus')); // false

// Bei Elementen, die schon im Dokument sind, hilft nur focus():
const ziel = document.querySelector('#weiter');
ziel.focus({ preventScroll: true });

false

// Wichtig · Fallstricke

Nur beim Einfügen wirksam: Wird autofocus an einem Element gesetzt, das schon im Dokument steht, springt der Fokus nicht dorthin. In diesem Fall focus() verwenden.
Fokussierbarkeit nötig: Ohne tabindex sind die meisten SVG-Elemente, außer z. B. <a href>, nicht fokussierbar, und autofocus bleibt wirkungslos.
Nur ein Kandidat zählt: Haben mehrere Elemente autofocus, bekommt in der Regel nur das erste den Fokus. Ist bereits ein Element fokussiert, wird der Autofokus ignoriert. In Dokumenten aus fremden Ursprüngen (Cross-Origin-iframes) kann er ebenfalls blockiert werden.
Barrierefreiheit: Ein automatischer Fokus kann Screenreader-Nutzer verwirren, weil Inhalte vor dem fokussierten Element übersprungen werden. Nur einsetzen, wenn der Fokuswechsel für den Nutzer klar erwartbar ist.
Kompatibilität: Die Eigenschaft ist seit 2023 in allen modernen Browsern verfügbar (Chrome/Edge 79, Safari 15.4, Firefox 110). Ältere Browser liefern undefined. Als Rückfall kann man setAttribute('autofocus', '') verwenden oder direkt focus() aufrufen.

Siehe auch

MathMLElement.autofocus SVGElement.nonce SVGElement.dataset SVGElement.style SVGElement.tabIndex