Copying to Clipboard in JavaScript: 3 Working Methods

Three Ways to Copy Text to Clipboard in JavaScript: From Ancient to Modern

Have you ever wondered how the magic of the "Copy" button works? You click — and a link, code, or promo code is already in the clipboard. No flashes, no scrolling, no extra movements. This seemingly simple task is one of the most popular questions on Stack Overflow. And for good reason: implementing clipboard copying in JavaScript hides pitfalls, browser differences, and three entire eras of web development.

In this article, we will cover all the ways to copy text to the clipboard using JavaScript: from the good old (and nearly dead) document.execCommand to the modern, asynchronous navigator.clipboard. You will learn not only how to copy text but also how to do it safely, elegantly, and with support for older browsers. Let's go!

Why Copying to Clipboard Is Not "Simple"

At first glance, it seems: what's so difficult? Take the text, send it to the clipboard. But browsers are paranoid. They don't want any script on a website to be able to read or write to the clipboard without your knowledge. Imagine: you open a website, and it quietly replaces your copied password with "SendBitcoinToMe". Scary, right?

Therefore, JavaScript has strict rules: copying is only possible during an active user action (click, key press). And even with this condition — not all APIs work the same. Let's figure it out.

Method #1: The Classic — document.execCommand('copy')

How It Works

Back in the dinosaur era (roughly before 2020), the only way to copy text to the clipboard was a trick with execCommand. The idea is simple:

\n
• Create a temporary textarea or input.
\n
• Place the desired text into it.
\n
• Select it (via select()).
\n
• Call document.execCommand('copy').
\n
• Remove the temporary element.
\n

Here's what it looks like in code:

function copyToClipboardLegacy(text) {\n    // Create a temporary element\n    const textarea = document.createElement('textarea');\n    textarea.value = text;\n    // Make it invisible\n    textarea.style.position = 'fixed';\n    textarea.style.opacity = '0';\n    document.body.appendChild(textarea);\n    // Select the text\n    textarea.select();\n    textarea.setSelectionRange(0, 99999); // For mobile devices\n    // Copy\n    try {\n        const successful = document.execCommand('copy');\n        if (successful) {\n            console.log('Text copied!');\n        } else {\n            console.error('Copying failed');\n        }\n    } catch (err) {\n        console.error('Copy error:', err);\n    }\n    // Clean up\n    document.body.removeChild(textarea);\n}

Pros and Cons

Pros: works even in Internet Explorer 9. No permissions required.

Cons: considered deprecated. Synchronous — blocks the main thread while copying. Inconvenient for copying large amounts of data. And most importantly, in modern browsers, it may be removed at any time.

Tip: if you are writing a new project — do not use execCommand. But for supporting very old browsers (IE11, old Edge), this is the only option.

Method #2: Modern — Clipboard API (navigator.clipboard)

How It Works

Replacing the workarounds came the Clipboard API — asynchronous, secure, and flexible. It lives in the navigator.clipboard object and can not only write but also read from the clipboard (with user permission).

For copying, the writeText() method is used:

async function copyToClipboardModern(text) {\n    try {\n        await navigator.clipboard.writeText(text);\n        console