Copy Text Using the Clipboard API in JavaScript

In this tutorial, you'll learn how to copy text to the clipboard using a couple of different methods, including the Clipboard API in JavaScript.

Copying Text with execCommand()

Currently, in many browsers, you can select copy content to the clipboard with the execCommand() method. From there, you could paste the copied text anywhere you wanted.

With this option, we'll create our HTML code:

<textarea id="textarea">Orangeable helped me learn JavaScript.</textarea>
<button id="copy-text" onClick="copyText()">Copy</button>

Then, we'll execute our copyText() method when the Copy button is clicked, selecting and copying the textarea content to the clipboard:

function copyText() {
	var content = document.getElementById("textarea");

	content.select();
	document.execCommand("copy");
}

According to MDN's documentation, the execCommand() method is deprecated and should no longer be used. Luckily, there's another method that offers more functionality!

JavaScript's Clipboard API

The Clipboard API provides functionality for asynchronous read and write operations, allowing you to copy and paste content to and from the clipboard.

It's important to note that the Clipboard API will only work in a secure environment, either HTTPS or localhost. You can circumvent this by enabling the Insecure origins treated as secure option under chrome://flags in your Chrome browser and by adding your local domain, however, it's highly recommended that you don't do this unless you're temporarily testing the functionality locally.

You can test the state of your environment with the window.isSecureContext boolean variable. This variable returns true if the environment is secure:

if (window.isSecureContext) {
	...
}

Testing for Clipboard API Support

The Clipboard API can be accessed through the navigator.clipboard object. You can test for support in your users' browsers with the following snippet:

if (navigator.clipboard) {
	...
}

Copy Text to the Clipboard

Let's create a scenario where we'll be copying all of the text from a textarea element on the page by clicking a button.

Here is the HTML code we'll use:

<textarea id="textarea">Orangeable helped me learn JavaScript.</textarea>
<button id="copy-text" onClick="copyText()">Copy</button>

Clicking the button will invoke the copyText() method from our JavaScript code:

function copyText() {
	var content = document.getElementById("textarea").innerHTML;
	
	if (navigator.clipboard) {
		navigator.clipboard.writeText(content).then(function() {
			console.log("Text copied to clipboard.");
		});
	}
	else {
		console.log("Clipboard API not supported.");
	}
}

Conclusion

JavaScript's Clipboard API is powerful but still fairly new. You'll need to check here for browser support to see if this functionality is available, while following the guidelines above for checking browser support before usage.