JavaScript Document queryCommandSupported() Method

What You’ll Learn

document.queryCommandSupported() is a deprecated, non-standard instance method that reports whether a named editor command exists in the browser (see MDN Document: queryCommandSupported()). Learn the boolean return value, the MDN SelectAll pattern, paste privilege notes, how it differs from queryCommandEnabled() and queryCommandState(), and five try-it labs.

Introduction

Before a legacy toolbar offers bold or SelectAll, it often asks: “Does this browser even know that command?” document.queryCommandSupported() answers that question.

MDN: the method reports whether or not the specified editor command is supported by the browser. If you still use deprecated execCommand(), MDN suggests checking with queryCommandSupported() for compatibility.

Related tutorials: execCommand(), queryCommandEnabled(), queryCommandState(), designMode.

Understanding document.queryCommandSupported()

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

• command — string naming the command to check (MDN).
• Return value — true if supported, false otherwise (MDN).
• Pairs with — deprecated document.execCommand() (MDN note).
• paste — MDN: false when unavailable or when privileges are insufficient.
• vs enabled — supported = browser knows it; enabled = usable right now.
• vs state — state = already applied to the selection.

📝 Syntax

General form of Document.queryCommandSupported (MDN):

queryCommandSupported(command)

Parameters

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

Return value

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

MDN Notes (paste)

• The "paste" command returns false not only if unavailable, but also if the calling script has insufficient privileges (MDN).

MDN-style support check

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

if (flg) {
  // Do something… e.g. document.execCommand("SelectAll", false, null)
}

⚖️ Supported vs Enabled vs State vs execCommand

Examples Gallery

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

const flg = document.queryCommandSupported("SelectAll");
console.log("SelectAll supported:", flg);

if (flg) {
  console.log("Safe to call execCommand(\"SelectAll\") in legacy UI");
}

SelectAll supported: true
Safe to call execCommand("SelectAll") in legacy UI
(exact boolean can vary)

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

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

queryCommandSupported available: true
bold supported: true
(results vary by browser)

const commands = ["bold", "insertText", "SelectAll", "copy", "paste"];
const report = commands.map((name) => {
  const supported =
    typeof document.queryCommandSupported === "function"
      ? document.queryCommandSupported(name)
      : false;
  return name + ": " + (supported ? "yes" : "no");
});
console.log(report.join("\n"));

bold: yes
insertText: yes
SelectAll: yes
copy: yes
paste: no
(exact results vary by browser)

const pasteSupported =
  typeof document.queryCommandSupported === "function"
    ? document.queryCommandSupported("paste")
    : false;

console.log("paste supported:", pasteSupported);
if (!pasteSupported) {
  console.log(
    "MDN: false can mean unavailable OR insufficient privileges"
  );
  console.log("Prefer navigator.clipboard.readText() for new apps");
}

paste supported: false
MDN: false can mean unavailable OR insufficient privileges
Prefer navigator.clipboard.readText() for new apps

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;
  const state =
    typeof document.queryCommandState === "function"
      ? document.queryCommandState(name)
      : null;
  return (
    name +
    " → supported=" + supported +
    ", enabled=" + enabled +
    ", state=" + state
  );
});
console.log(lines.join("\n"));

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

🚀 Common Use Cases

• Legacy toolbar capability checks — hide unsupported commands (MDN).
• Safe execCommand gate — MDN: check support before running a deprecated command.
• Maintaining old editors — explain why paste / clipboard actions disappear.
• Interview / history knowledge — supported vs enabled vs state.
• Not new clipboard UX — use the Clipboard API instead.
• 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 queryCommandSupported() for compatibility checks.
• MDN: paste can return false for privilege reasons, not only missing support.
• Do not confuse “supported” with “enabled” or “state”.
• Support matrices still vary by engine — always verify in your target browsers.
• Related: execCommand(), queryCommandEnabled(), queryCommandState(), designMode.

💡 Best Practices