[Solution] JavaScript document.execCommand() Deprecated — Use Clipboard API

The document.execCommand() method was deprecated in the DOM Living Standard. It was the only way to programmatically copy, cut, and paste content in the browser for many years, but it has been replaced by the modern Clipboard API (navigator.clipboard). The new API is Promise-based, more secure, and works in both the main thread and Web Workers.

What You’ll See

Browsers may log warnings in the console:

document.execCommand() is deprecated

In some contexts, execCommand() may silently fail or behave inconsistently across browsers because it operates on the current selection and requires focus.

Why Deprecated

document.execCommand() had several problems:

Selection-dependent: It operated on the current text selection, which was fragile and could change unexpectedly.
No return value for errors: It returned a boolean that was unreliable — false did not always mean failure.
Security restrictions: Browsers increasingly restricted it to user-initiated events without clear feedback.
Synchronous: It was a synchronous blocking call that could not be used with modern async patterns.
Inconsistent implementations: Each browser implemented it slightly differently, leading to cross-browser bugs.

The Clipboard API resolves all of these issues with a clean, Promise-based interface.

Old Code (Deprecated)

// Copy text to clipboard
function copyToClipboard(text) {
  var textarea = document.createElement("textarea");
  textarea.value = text;
  textarea.style.position = "fixed";
  textarea.style.opacity = "0";
  document.body.appendChild(textarea);
  textarea.select();
  var success = document.execCommand("copy");
  document.body.removeChild(textarea);
  return success;
}

// Cut text
function cutSelection() {
  document.execCommand("cut");
}

// Paste text from clipboard
function pasteFromClipboard() {
  var text = document.execCommand("paste");
  return text;
}

// Bold selected text
document.execCommand("bold");

// Insert HTML at cursor
document.execCommand("insertHTML", false, "<b>Hello</b>");

// Undo/Redo
document.execCommand("undo");
document.execCommand("redo");

New Code (Replacement)

// Copy text to clipboard — async Clipboard API
async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch (err) {
    console.error("Failed to copy:", err);
    return false;
  }
}

// Read text from clipboard — requires user permission
async function pasteFromClipboard() {
  try {
    const text = await navigator.clipboard.readText();
    return text;
  } catch (err) {
    console.error("Failed to read clipboard:", err);
    return null;
  }
}

// Write to clipboard with a modern async pattern
async function handleCopy() {
  const text = document.getElementById("source").value;
  try {
    await navigator.clipboard.writeText(text);
    showNotification("Copied to clipboard!");
  } catch (err) {
    showNotification("Copy failed — check permissions");
  }
}

// Copy rich text (HTML) to clipboard
async function copyRichText(html, plainText) {
  const blob = new Blob([html], { type: "text/html" });
  const item = new ClipboardItem({
    "text/html": blob,
    "text/plain": new Blob([plainText], { type: "text/plain" }),
  });
  await navigator.clipboard.write([item]);
}

// Fallback for older browsers — the execCommand approach
async function copyWithFallback(text) {
  if (navigator.clipboard && navigator.clipboard.writeText) {
    try {
      await navigator.clipboard.writeText(text);
      return true;
    } catch (err) {
      // Fall through to legacy method
    }
  }

  // Legacy fallback
  const textarea = document.createElement("textarea");
  textarea.value = text;
  textarea.style.position = "fixed";
  textarea.style.opacity = "0";
  document.body.appendChild(textarea);
  textarea.select();
  const success = document.execCommand("copy");
  document.body.removeChild(textarea);
  return success;
}

Clipboard API vs execCommand Comparison

Feature	`execCommand`	Clipboard API
Copy text	`document.execCommand("copy")`	`navigator.clipboard.writeText(text)`
Paste text	`document.execCommand("paste")`	`navigator.clipboard.readText()`
Async	No	Yes (Promise-based)
Permission required	No (but restricted)	Yes (user gesture required)
Works off main thread	No	Yes (Web Workers)
Copy HTML	Via selection only	`ClipboardItem` with `text/html`
Error handling	Unreliable boolean	Promise rejection

Migration Steps

Find all execCommand calls:

grep -rn "execCommand" --include="*.js" /path/to/project/

Replace copy operations with navigator.clipboard.writeText(). This is the most common use case.
Replace paste operations with navigator.clipboard.readText(). Note that reading the clipboard requires explicit user permission — the browser will show a permission prompt.
Add error handling. The Clipboard API can fail if permission is denied or the page is not served over HTTPS.
Add a fallback if you need to support older browsers that do not have the Clipboard API.
Test in multiple browsers. The Clipboard API is supported in Chrome 66+, Firefox 63+, Safari 13.1+, and Edge 79+.
Check for related deprecated patterns like escape()/unescape() and substr():

grep -rn "execCommand\|\.substr\|\.escape\|\.unescape" --include="*.js" /path/to/project/