MathMLElement.autofocus — Eigenschaft · JavaScript-Referenz

Signatur

MathMLElement.autofocus

Beschreibung

Die Eigenschaft autofocus des Interfaces MathMLElement spiegelt das globale Attribut autofocus wider. Ist sie true, soll das Element beim Laden des Dokuments bzw. beim Einfügen eines Dialogs automatisch den Fokus bekommen. Lesen liefert true, sobald das Attribut vorhanden ist, egal mit welchem Wert. Beim Setzen auf true wird autofocus="" ergänzt, bei false wird das Attribut entfernt.

Wichtig: Das Attribut wirkt nur einmal, nämlich bei der automatischen Fokussierung nach dem Laden des Dokuments oder beim Öffnen eines <dialog>- bzw. Popover-Elements. Wer die Eigenschaft später per Skript setzt, verschiebt den Fokus damit nicht. Dafür gibt es element.focus().

Damit ein MathML-Element überhaupt fokussiert werden kann, muss es fokussierbar sein, also z. B. ein tabindex-Attribut besitzen. Sonst hat autofocus keine sichtbare Wirkung. Die Eigenschaft ist identisch mit HTMLElement.autofocus und SVGElement.autofocus, weil sie über das Mixin HTMLOrSVGElement bereitgestellt wird.

Beispiele

Eigenschaft lesen

// HTML: <math><mi id="x" tabindex="0" autofocus>x</mi></math>
const mi = document.getElementById('x');
console.log(mi instanceof MathMLElement);
console.log(mi.autofocus);

true true

Eigenschaft setzen und Attribut prüfen

const mo = document.createElementNS('http://www.w3.org/1998/Math/MathML', 'mo');
mo.textContent = '+';
console.log(mo.autofocus);           // false
mo.autofocus = true;
console.log(mo.getAttribute('autofocus')); // ""
mo.autofocus = false;
console.log(mo.hasAttribute('autofocus'));

false "" false

Autofokus in einem Dialog mit Formel

const MATHML_NS = 'http://www.w3.org/1998/Math/MathML';
const dialog = document.createElement('dialog');
const math = document.createElementNS(MATHML_NS, 'math');
const mi = document.createElementNS(MATHML_NS, 'mi');
mi.textContent = 'π';
mi.tabIndex = 0;       // fokussierbar machen
mi.autofocus = true;   // beim Öffnen des Dialogs fokussieren
math.append(mi);
dialog.append(math);
document.body.append(dialog);

dialog.showModal();
console.log(document.activeElement === mi);

true

// Wichtig · Fallstricke

Wenn man autofocus nach dem Laden der Seite setzt, bewegt das den Fokus nicht. Dafür element.focus() verwenden.
Ohne tabindex sind MathML-Elemente in der Regel nicht fokussierbar, und das Attribut bleibt dann wirkungslos.
Pro Dokument wird nur das erste Element mit autofocus berücksichtigt. Außerdem ignorieren Browser den Autofokus, wenn der Nutzer schon mit der Seite interagiert oder ein anderes Element fokussiert hat.
Barrierefreiheit: Automatisches Fokussieren kann Screenreader-Nutzer verwirren und die Seite ungewollt scrollen. Deshalb sparsam einsetzen.
Kompatibilität: MathML Core und damit MathMLElement gibt es erst in neueren Browsern (Chrome/Edge 109+, Firefox 110+, Safari 17+). In älteren Browsern ist die Eigenschaft nicht definiert.

Siehe auch

MathMLElement HTMLElement.autofocus SVGElement.autofocus HTMLElement.focus() MathMLElement.tabIndex Document.activeElement MathMLAnchorElement.origin