MathMLElement.focus() — Methode · JavaScript-Referenz

Signatur

MathMLElement.prototype.focus(options)

Beschreibung

Die Methode focus() der Schnittstelle MathMLElement funktioniert wie HTMLElement.focus(): Sie macht das Element zum aktiven Element des Dokuments (document.activeElement). Danach gehen Tastatureingaben an dieses Element und es löst die Ereignisse focus und focusin aus.

MathML-Elemente wie <math>, <mrow> oder <mi> sind von sich aus nicht fokussierbar. Erst ein tabindex-Attribut macht sie fokussierbar. Mit tabindex="0" ist das Element auch per Tab-Taste erreichbar. Mit tabindex="-1" lässt es sich nur per Skript fokussieren. Ist das Element nicht fokussierbar, macht der Aufruf nichts und wirft auch keinen Fehler.

Das ist vor allem für die Barrierefreiheit nützlich: Man kann Formeln per Tastatur erreichbar machen, Screenreader-Nutzer gezielt zu einer Formel führen oder in interaktiven Formel-Editoren und Lernanwendungen einzelne Teilausdrücke ansteuern.

Parameter

Name	Typ	Default	Beschreibung
$options	object	{}	Optionales Objekt mit Einstellungen für den Fokus.
$options.preventScroll	boolean	false	Bei `true` scrollt der Browser das Element nicht automatisch in den sichtbaren Bereich.
$options.focusVisible	boolean	vom Browser bestimmt	Bei `true` wird der Fokusring sichtbar angezeigt, auch wenn der Fokus per Skript gesetzt wurde. Das wird noch nicht in allen Browsern unterstützt.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Formel fokussierbar machen und fokussieren

// HTML: <math id="formel" tabindex="0"><mi>E</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup></math>
const formel = document.getElementById('formel');
formel.focus();
console.log(document.activeElement === formel);

true

Ohne tabindex passiert nichts

// HTML: <math id="ohne"><mi>x</mi></math>
const mathEl = document.getElementById('ohne');
mathEl.focus();
console.log(document.activeElement === mathEl); // nicht fokussierbar

mathEl.tabIndex = -1; // nur per Skript fokussierbar
mathEl.focus();
console.log(document.activeElement === mathEl);

false true

Teilausdrücke per Pfeiltasten ansteuern, ohne zu scrollen

// HTML: <math><mrow class="teil" tabindex="-1">...</mrow><mrow class="teil" tabindex="-1">...</mrow></math>
const teile = [...document.querySelectorAll('math .teil')];
let index = 0;

document.addEventListener('keydown', (event) => {
  if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') return;
  index = event.key === 'ArrowRight'
    ? Math.min(index + 1, teile.length - 1)
    : Math.max(index - 1, 0);
  teile[index].focus({ preventScroll: true });
  console.log('Fokus auf Teil', index);
});

Fokus auf Teil 1

// Wichtig · Fallstricke

Fokussierbarkeit: Ohne tabindex hat der Aufruf keine Wirkung und gibt keine Fehlermeldung. Prüfe den Erfolg deshalb über document.activeElement.
Elemente, die ausgeblendet sind (display: none), das Attribut inert tragen oder nicht im DOM hängen, lassen sich nicht fokussieren.
Kompatibilität: MathMLElement gibt es in Chrome/Edge erst ab Version 109, als MathML Core eingeführt wurde. Ältere Chromium-Versionen behandeln MathML-Knoten als generische Element-Objekte ohne focus(). Firefox und Safari unterstützen es schon länger. Die Option focusVisible wird noch nicht überall unterstützt.
Barrierefreiheit: Gib fokussierbaren Formeln eine zugängliche Beschreibung (z. B. aria-label) und einen gut sichtbaren Fokusstil (:focus-visible).

Siehe auch

MathMLElement.blur() HTMLElement.focus() SVGElement.focus() Document.activeElement MathMLElement.tabIndex new SyncEvent()