How to Implement Copy to Clipboard on a Website

#javascript #react #webdev #angular

In this article, we are going to see how we can implement a copy to clipboard functionality on our website. On clicking the Copy button, the content/text of a paragraph tag should be copied to the clipboard which we can paste anywhere in our system.

Let's directly jump onto the code part.

I am assuming you have some basic knowledge of HTML, JavaScript and DOM manipulation.

👨‍💻 Code

We will write a very simple HTML code to display the paragraph content and a copy button.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Copy To Clipboard</title>
</head>

<body align="center">
    <p id="content">The text to be copied.</p>
    <button id="copy">Copy Text</button>
    <script src="./script.js"></script>
</body>

</html>

script.js

// Reference of the paragraph tag
const content = document.getElementById("content");

// Reference of the copy button
const copyBtn = document.getElementById("copy");

// Copy button's onclick handler
copyBtn.onclick = copyToClipboard;

// Method responsible for copying the content
function copyToClipboard() {
    navigator.clipboard
        .writeText(content.innerText)
        .then(() => alert("Copied to clipboard"))
        .catch((e) => alert(e.message));
}

So first we are getting the reference of the paragraph tag and the copy button, then assigned the onclick handler to the copy button.

On clicking the copy button, the copyToClipboard method will get invoked.

Copy To Clipboard

Inside the copyToClipboard method we are using the Clipboard API.

The Clipboard API can be used to implement cut, copy, and paste features within a web application.

The system clipboard is exposed through the global navigator.clipboard property.
The writeText method of the clipboard object expects a string value as an argument, which will be written to the clipboard.
It returns a promise which is resolved once the clipboard's contents have been updated. The promise is rejected in case of any kind of error.

...
navigator.clipboard
    .writeText(content.innerText)
    .then(() => alert("Copied to clipboard"))
    .catch((e) => alert(e.message));
...

So we are passing the inner text of the paragraph tag to the writeText method and if the promise is resolved i.e, the text has been copied.

✨ Bonus

Similarly, we can implement cut functionality.

After the text has been copied to the clipboard, just overwrite the inner text of the paragraph tag with an empty string.

navigator.clipboard
    .writeText(content.innerText)
    .then(() => {
        // Overwriting with an empty string
        content.innerText = "";
        alert("Copied to clipboard");
    })
    .catch((e) => alert(e.message));