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.
Comments
There are no comments yet. Start the conversation!