MathMLElement.blur() — Methode · JavaScript-Referenz

Signatur

MathMLElement.prototype.blur()

Beschreibung

Die Methode blur() gehört zur Schnittstelle MathMLElement. Sie nimmt einem MathML-Element (z. B. <math>, <mrow> oder <mi>) den Tastaturfokus weg. Sie funktioniert genauso wie HTMLElement.prototype.blur() und SVGElement.prototype.blur(), denn alle drei setzen das gemeinsame Mixin HTMLOrSVGElement um.

MathML-Elemente lassen sich normalerweise nicht fokussieren. Damit focus() und blur() etwas bewirken, muss das Element das Attribut tabindex haben. Mit tabindex="0" kommt es in die Tab-Reihenfolge, mit tabindex="-1" lässt es sich nur per Skript fokussieren. Das ist zum Beispiel bei interaktiven Formel-Editoren, Lernplattformen oder barrierefreien Formeln nützlich, wo Nutzer mit der Tastatur durch die Teile einer Formel wandern.

Ist das Element beim Aufruf fokussiert, verliert es den Fokus. Danach steht der Fokus in der Regel auf document.body, und die Ereignisse blur und focusout werden ausgelöst. Ist das Element nicht fokussiert, passiert nichts: Es gibt keinen Fehler und es wird auch kein Ereignis ausgelöst.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Fokus per Knopf von einer Formel entfernen

// HTML:
// <math><mi id="var-x" tabindex="0">x</mi><mo>+</mo><mn>1</mn></math>
// <button id="focus">Fokus setzen</button>
// <button id="blur">Fokus entfernen</button>

const mi = document.getElementById('var-x');

document.getElementById('focus').addEventListener('click', () => {
  mi.focus();
  console.log('Fokussiert:', document.activeElement === mi);
});

document.getElementById('blur').addEventListener('click', () => {
  mi.blur();
  console.log('Fokussiert:', document.activeElement === mi);
});

Fokussiert: true Fokussiert: false

blur-Ereignis auf einem MathML-Element beobachten

const formel = document.querySelector('math');
formel.tabIndex = 0; // macht das Element fokussierbar

formel.addEventListener('focus', () => formel.classList.add('aktiv'));
formel.addEventListener('blur', () => {
  formel.classList.remove('aktiv');
  console.log('Formel hat den Fokus verloren');
});

formel.focus();
formel.blur();

Formel hat den Fokus verloren

Formel-Editor: Fokus mit Escape verlassen

// Die Teile der Formel sind mit tabindex="0" fokussierbar
const teile = document.querySelectorAll('math [tabindex]');

teile.forEach((el) => {
  el.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') {
      event.preventDefault();
      el.blur(); // Bearbeitungsmodus verlassen
      console.log(`Bearbeitung von "${el.textContent}" beendet`);
    }
  });
});

Bearbeitung von "x" beendet

// Wichtig · Fallstricke

Ohne tabindex passiert nichts: MathML-Elemente sind normalerweise nicht fokussierbar. Dann laufen focus() und blur() ins Leere, ohne einen Fehler zu melden.
Browser-Unterstützung: MathMLElement gibt es erst in neueren Browsern (Chrome/Edge ab 109, Firefox ab 71, Safari ab 16.4). In älteren Browsern sind MathML-Elemente einfache Element-Objekte ohne blur(). Prüfe das vorher mit typeof el.blur === 'function'.
Barrierefreiheit: Wenn du den Fokus einfach wegnimmst, wissen Tastatur- und Screenreader-Nutzer oft nicht mehr, wo sie sich befinden. Setze den Fokus besser gezielt mit focus() auf ein sinnvolles nächstes Element, statt nur blur() aufzurufen.
blur steigt im DOM nicht nach oben (kein Bubbling). Für die Ereignis-Delegation an einem übergeordneten Element nimmst du focusout.

Siehe auch

MathMLElement.focus() MathMLElement HTMLElement.blur() SVGElement.blur() Document.activeElement