DEV Community

loading...
Cover image for How to Implement Copy to Clipboard on a Website

How to Implement Copy to Clipboard on a Website

Bibek
Hey, 👋 I'm a full-stack developer with expertise in the MERN stack. I do freelancing, contract jobs for my living 👨🏼‍💻
Originally published at blog.bibekkakati.me ・3 min read

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>
Enter fullscreen mode Exit fullscreen mode

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));
}
Enter fullscreen mode Exit fullscreen mode

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));
...
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode

🔗 Demo

GitHub Repo: Link

Try It Out: Link


Originally published on blog.bibekkakati.me


Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Twitter | Instagram | LinkedIn


If you like my work and want to support it, you can do it here. I will really appreciate it.



Discussion (7)

Collapse
jsnanigans profile image
Brendan Mullins

I appreciate that you did this in plains JS and not some framework 🤗

Collapse
bibekkakati profile image
Bibek Author

Thank you.

Collapse
waylonwalker profile image
Waylon Walker

Looks way easier than I realized, I need to do this.

Collapse
bibekkakati profile image
Bibek Author

Yeah. It's very easy to implement.

Btw, thank you for your comment.

Collapse
wmattei profile image
Wagner Mattei

Great post!
Here is a link that shows which browsers give support to navigator.clipboard:

whatwebcando.today/clipboard.html

Collapse
minhazhalim profile image
Minhaz Halim (Zim)

Thanks!!

Collapse
bibekkakati profile image
Bibek Author

😊