Copy text from DOM to clipboard using JavaScript

This post will discuss how to copy some text from DOM to the clipboard using JavaScript.

1. Using `Document.execCommand('copy')` method

To copy a text from an input element or a textarea on DOM, you can use the document.execCommand method. The idea is to create a fully transparent textarea and attach it to the document’s body. Then set its content with the text you want to be copied to the clipboard. Finally, call document.execCommand('copy') after programmatically selecting the textarea contents and then remove the textarea from the document.

Here’s a working example:

JS

document.getElementById("copy").onclick = function() {

var copyTextarea = document.createElement("textarea");

copyTextarea.style.position = "fixed";

copyTextarea.style.opacity = "0";

copyTextarea.textContent = document.getElementById("content").value;

document.body.appendChild(copyTextarea);

copyTextarea.select();

document.execCommand("copy");

document.body.removeChild(copyTextarea);

}

HTML

<body>

<textarea id="content" rows="5" cols="30">Write something here…</textarea>

</body>

Edit in JSFiddle

Note that the clipboard access is synchronous (i.e., the browser blocks the page), leading to a poor user experience. Therefore, its use is discouraged, and it may be removed in the future.

Also, note that you can only call document.execCommand('copy') from an event handler such as onclick due to security restrictions.

2. Using Clipboard API

Since the execCommand-based copy and paste are obsolete due to its synchronous nature, the new Promise-based Async Clipboard API should be used instead, which doesn’t block the page due to its well-defined permissions model.

You can call the writeText() method to copy text to the clipboard, which uses an ES6 Promise, which will be resolved or rejected depending upon whether the copying is a success or failure.

JS

document.getElementById("copy").onclick = function() {

var text = document.getElementById("content").value;

navigator.clipboard.writeText(text)

.then(() => {

console.log('Text copied to clipboard');

})

.catch(err => {

console.error('Error in copying text: ', err);

});

}

HTML

<body>

<textarea id="content" rows="5" cols="30">Write something here…</textarea>

</body>

Edit in JSFiddle

You can also write an async function and await the return of writeText():

JS

document.getElementById("copy").onclick = function() {

var text = document.getElementById("content").value;

copyTextToClipboard(text);

}

async function copyTextToClipboard(text) {

try {

await navigator.clipboard.writeText(text);

console.log('Text copied to clipboard');

} catch (err) {

console.error('Error in copying text: ', err);

}

HTML

<body>

<textarea id="content" rows="5" cols="30">Write something here…</textarea>

</body>

Edit in JSFiddle

3. Using Clipboard API Polyfill

Alternatively, you can use the clipboard-polyfill library, a polyfill for the modern asynchronous clipboard API. To copy, simply call its clipboard.writeText() method.

JS

document.getElementById("copy").onclick = function() {

var text = document.getElementById("content").value;

clipboard.writeText(text);

}

HTML

<html>

<head>

</head>

<body>

<textarea id="content" rows="5" cols="30">Write something here…</textarea>

</body>

</html>

Edit in JSFiddle

That’s all about copying text to the clipboard with JavaScript.

Copy text from DOM to clipboard using JavaScript

1. Using Document.execCommand('copy') method

JS

HTML

2. Using Clipboard API

JS

HTML

JS

HTML

3. Using Clipboard API Polyfill

JS

HTML

Share this:

1. Using `Document.execCommand('copy')` method