Copy to the Clipboard in JavaScript & Clipboard API

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

Copying Text with execCommand()

Currently, in many browsers, you can copy to the clipboard with JavaScript's 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 with JavaScript.

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 to the Clipboard

Let's create a scenario where we'll select text from a textarea element on the page and copy to the clipboard in JavaScript.

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

This tutorial taught you how to copy to the clipboard in JavaScript using a couple different methods:  The execCommand() method and the Clipboard API.

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.