How do I copy to the clipboard in JavaScript?

Modern Clipboard API and Fallback Approaches for Copying Text

Copying text to a user’s clipboard is a common feature for web applications, like sharing codes, URLs, or product keys. Modern browsers offer the asynchronous Clipboard API, which simplifies clipboard operations. For older browsers, fallback methods can be used.

1. Using the Async Clipboard API (Modern Approach)

The Clipboard API’s navigator.clipboard.writeText() method provides a clean, promise-based way to write text to the clipboard. This API is supported in most modern browsers, but check compatibility if you need wide support.

Example:

function copyText(text) {
  return navigator.clipboard.writeText(text)
    .then(() => {
      console.log("Text copied to clipboard!");
    })
    .catch(err => {
      console.error("Failed to copy: ", err);
    });
}

copyText("Hello, world!");

Key Points:

Works over HTTPS in most modern browsers.
Returns a Promise, allowing for async/await usage and error handling.
Minimal code and straightforward to implement.

2. Using `document.execCommand("copy")` (Fallback)

Before the Clipboard API, developers commonly used document.execCommand("copy"). Although now deprecated, it still works in some older browsers. This method requires a temporary, focused element (like a textarea) from which the text is copied.

Example:

function legacyCopyText(text) {
  const textarea = document.createElement("textarea");
  textarea.value = text;
  
  // Keep the textarea out of view
  textarea.style.position = "fixed";
  textarea.style.left = "-99999px";
  document.body.appendChild(textarea);
  
  // Select and copy
  textarea.select();
  try {
    document.execCommand("copy");
    console.log("Text copied to clipboard!");
  } catch (err) {
    console.error("Failed to copy: ", err);
  }
  
  // Cleanup
  document.body.removeChild(textarea);
}

legacyCopyText("Hello, world!");

Key Points:

Works in older browsers but may be removed in the future.
More verbose and less user-friendly than the Clipboard API.
Consider this a fallback solution.

Feature Detection

To provide the best user experience, you can check for the presence of navigator.clipboard and use the modern API if available, otherwise revert to execCommand() as a fallback:

function copyTextCrossBrowser(text) {
  if (navigator.clipboard && navigator.clipboard.writeText) {
    return navigator.clipboard.writeText(text);
  } else {
    // Fallback for older browsers
    const textarea = document.createElement("textarea");
    textarea.value = text;
    textarea.style.position = "fixed";
    textarea.style.left = "-99999px";
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand("copy");
    document.body.removeChild(textarea);
    return Promise.resolve();
  }
}

Strengthening Your JavaScript Skills

Copying text to the clipboard is just one practical task in modern web development. To tackle a wide range of challenges confidently and write cleaner, more efficient code, consider building a solid foundation in JavaScript:

Grokking JavaScript Fundamentals: Perfect for beginners or those refining their knowledge. This course provides comprehensive coverage of core language features, best practices, and modern APIs—ensuring you can handle real-world tasks like clipboard operations and more.

In Summary

Use navigator.clipboard.writeText() for a clean, promise-based modern solution.
Fallback to document.execCommand("copy") for older browsers if needed.
Combine both approaches with feature detection to ensure maximum compatibility.