JavaScript Document queryCommandEnabled() Method

What You’ll Learn

document.queryCommandEnabled() is a deprecated, non-standard instance method that reports whether a named editor command is currently enabled (see MDN Document: queryCommandEnabled()). Learn the boolean return value, the MDN SelectAll pattern with execCommand(), cut/copy/paste caveats, how it differs from queryCommandSupported(), and five try-it labs.

Introduction

Legacy rich-text UIs often ask two questions before running a toolbar action: “Does this browser know the command?” and “Can I run it right now?” queryCommandEnabled() answers the second.

MDN: the method reports whether the specified editor command is enabled by the browser. A common pattern is to check SelectAll (or another command), then call document.execCommand(...) only when the check returns true.

Related tutorials: execCommand(), designMode, getSelection().

Understanding document.queryCommandEnabled()

An instance method on the page’s document object that probes whether a named editing/clipboard command is currently enabled (MDN).

• command — string naming the command to check (MDN).
• Return value — true if enabled, false otherwise (MDN).
• Pairs with — deprecated document.execCommand() (MDN note).
• cut / copy — MDN: only returns true from a user-initiated thread.
• paste — MDN: false when unavailable or when privileges are insufficient.
• vs supported — queryCommandSupported = browser knows it; queryCommandEnabled = usable now.

📝 Syntax

General form of Document.queryCommandEnabled (MDN):

queryCommandEnabled(command)

Parameters

• command — the command for which to determine support / enabled state (MDN). Examples: "SelectAll", "bold", "copy", "cut", "paste".

Return value

A boolean that is true if the command is enabled and false if it is not (MDN).

MDN Notes (clipboard commands)

• For "cut" and "copy", the method only returns true when called from a user-initiated thread (MDN).
• For "paste", false can mean unavailable or insufficient privileges (MDN).

MDN-style check before execCommand

const flg = document.queryCommandEnabled("SelectAll");

if (flg) {
  document.execCommand("SelectAll", false, null); // command is enabled, run it
}

⚖️ queryCommandEnabled vs queryCommandSupported vs execCommand

Examples Gallery

Examples follow MDN Document: queryCommandEnabled() and practical beginner patterns. Always treat this API as legacy.

const flg = document.queryCommandEnabled("SelectAll");
console.log("SelectAll enabled:", flg);

if (flg) {
  document.execCommand("SelectAll", false, null);
  console.log("SelectAll ran");
}

SelectAll enabled: true
SelectAll ran
(exact boolean can vary by context)

const hasApi = typeof document.queryCommandEnabled === "function";
console.log("queryCommandEnabled available:", hasApi);

if (hasApi) {
  console.log("bold enabled:", document.queryCommandEnabled("bold"));
} else {
  console.log("Use a modern editor / Clipboard API instead");
}

queryCommandEnabled available: true
bold enabled: true
(results vary by browser / focus)

const btn = document.getElementById("boldBtn");
const editor = document.getElementById("editor");
editor.focus();

const enabled =
  typeof document.queryCommandEnabled === "function" &&
  document.queryCommandEnabled("bold");

btn.disabled = !enabled;
btn.textContent = enabled ? "Bold (enabled)" : "Bold (disabled)";
console.log("toolbar bold enabled:", enabled);

toolbar bold enabled: true
(button label updates; may be false without an editable focus)

function reportClipboardCommands() {
  const names = ["cut", "copy", "paste"];
  return names.map((name) => {
    const enabled =
      typeof document.queryCommandEnabled === "function"
        ? document.queryCommandEnabled(name)
        : false;
    return name + ": " + enabled;
  }).join("\n");
}

// Cold call (no click) — cut/copy often false (MDN)
console.log(reportClipboardCommands());

// Prefer modern clipboard for new apps:
// await navigator.clipboard.writeText("Hello");

cut: false
copy: false
paste: false
(may become true inside a click handler)

const names = ["bold", "SelectAll", "copy", "paste"];
const lines = names.map((name) => {
  const supported =
    typeof document.queryCommandSupported === "function"
      ? document.queryCommandSupported(name)
      : false;
  const enabled =
    typeof document.queryCommandEnabled === "function"
      ? document.queryCommandEnabled(name)
      : false;
  return name + " → supported=" + supported + ", enabled=" + enabled;
});
console.log(lines.join("\n"));

bold → supported=true, enabled=true
SelectAll → supported=true, enabled=true
copy → supported=true, enabled=false
paste → supported=false, enabled=false
(exact values vary)

🚀 Common Use Cases

• Legacy toolbar enable/disable — grey out Bold when the command is not enabled.
• Safe execCommand gate — MDN: check before running a deprecated command.
• Maintaining old editors — understand why cut/copy buttons stay disabled.
• Interview / history knowledge — enabled vs supported in the execCommand family.
• Not new clipboard UX — use the Clipboard API instead (MDN / execCommand guidance).
• Not a modern editor foundation — prefer dedicated libraries for new products.

📝 Notes

• MDN: Deprecated and Non-standard; not part of any current specification.
• MDN: if you still use execCommand(), consider queryCommandEnabled() for compatibility checks.
• MDN: cut/copy only return true from a user-initiated thread.
• MDN: paste can return false for privilege reasons, not only missing support.
• Do not confuse “enabled” with “supported” — check both in legacy UIs.
• Related: execCommand(), designMode, getSelection().

💡 Best Practices