Document.queryCommandEnabled() — Methode · JavaScript-Referenz

Signatur

Document.prototype.queryCommandEnabled(command)

Beschreibung

document.queryCommandEnabled() gehört zur alten execCommand-API für bearbeitbare Inhalte (contenteditable bzw. designMode). Die Methode gibt true zurück, wenn der angegebene Befehl – etwa "bold", "undo" oder "copy" – im aktuellen Zustand des Dokuments ausgeführt werden kann, sonst false.

Typischer Einsatz ist das Aktivieren oder Deaktivieren von Toolbar-Schaltflächen in einem einfachen Rich-Text-Editor: Nur wenn der Fokus in einem bearbeitbaren Bereich liegt und eine passende Auswahl existiert, sind Formatierungsbefehle verfügbar. Die Methode sagt nur aus, ob der Befehl jetzt möglich ist – nicht, ob er schon angewendet wurde (dafür gibt es queryCommandState()).

Die gesamte execCommand-Familie ist als veraltet markiert und nicht einheitlich spezifiziert. Für neue Projekte solltest du auf die Clipboard-API, die Selection-/Range-APIs, beforeinput-Events oder eine Editor-Bibliothek setzen.

Parameter

Name	Typ	Default	Beschreibung
$command Pflicht	string		Name des Editor-Befehls, z. B. `"bold"`, `"italic"`, `"undo"`, `"copy"`, `"insertOrderedList"`. Groß-/Kleinschreibung wird ignoriert.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn der Befehl aktuell ausführbar ist; false, wenn nicht oder wenn der Befehl unbekannt bzw. nicht unterstützt ist.

Beispiele

Einfache Abfrage eines Befehls

// Fokus in einen bearbeitbaren Bereich setzen
const editor = document.querySelector('#editor'); // <div id="editor" contenteditable>Text</div>
editor.focus();

console.log(document.queryCommandEnabled('bold'));
console.log(document.queryCommandEnabled('gibtEsNicht'));

true false

Toolbar-Schaltflächen je nach Zustand aktivieren

const buttons = document.querySelectorAll('[data-command]');

const updateToolbar = () => {
  for (const btn of buttons) {
    const cmd = btn.dataset.command;
    btn.disabled = !document.queryCommandEnabled(cmd);
  }
};

// Bei jeder Änderung der Auswahl neu prüfen
document.addEventListener('selectionchange', updateToolbar);

for (const btn of buttons) {
  btn.addEventListener('mousedown', (e) => e.preventDefault()); // Fokus behalten
  btn.addEventListener('click', () => {
    document.execCommand(btn.dataset.command, false, null);
    updateToolbar();
  });
}

Vorsichtiger Fallback mit Feature-Erkennung

const canUndo = () => {
  if (typeof document.queryCommandEnabled !== 'function') return false;
  try {
    return document.queryCommandEnabled('undo');
  } catch (err) {
    // Ältere Firefox-Versionen warfen bei unbekannten Befehlen Fehler
    console.warn('Befehl nicht unterstützt:', err.message);
    return false;
  }
};

console.log('Rückgängig möglich:', canUndo());

Rückgängig möglich: false

// Wichtig · Fallstricke

Veraltet: Die Methode ist deprecated und nur in einem inoffiziellen Entwurf (W3C Editing, execCommand) beschrieben. Sie funktioniert in Chrome, Edge, Firefox und Safari noch, kann aber jederzeit eingeschränkt werden.
Uneinheitliche Ergebnisse: Browser liefern je nach Befehl, Fokus und Auswahl unterschiedliche Antworten. Außerhalb eines contenteditable-Bereichs ist das Ergebnis meist false.
Zwischenablage: Bei "copy", "cut" und "paste" hängt das Ergebnis von Sicherheitsregeln (Nutzeraktion, Berechtigungen) ab; "paste" ist in Webinhalten fast immer false. Nutze stattdessen navigator.clipboard.
Ältere Firefox-Versionen warfen bei unbekannten Befehlen eine NS_ERROR_FAILURE-Ausnahme – aufrufen am besten in try/catch.
true garantiert nicht, dass execCommand() auch sichtbar etwas bewirkt.

Siehe auch

Document.execCommand() Document.queryCommandState() Document.queryCommandSupported() Document.designMode HTMLElement.contentEditable Clipboard