DEV Community

Cover image for How to Implement Copy to Clipboard on a Website
Bibek
Bibek

Posted on • Originally published at blog.bibekkakati.me

How to Implement Copy to Clipboard on a Website

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.



Top comments (9)

Collapse
 
waylonwalker profile image
Waylon Walker

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

Collapse
 
bibekkakati profile image
Bibek

Yeah. It's very easy to implement.

Btw, thank you for your comment.

Collapse
 
jsnanigans profile image
Brendan Mullins

I appreciate that you did this in plains JS and not some framework πŸ€—

Collapse
 
bibekkakati profile image
Bibek

Thank you.

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

😊

Collapse
 
highlyfavoredba profile image
HighlyFavoredBA

I'm wanting people to copy and paste my animated emoji emoticons on one of my internet sites. How can I do that? Thanks!

Collapse
 
highlyfavoredba profile image
HighlyFavoredBA • Edited

Thanks for the Like in regards to My Question! However, Answers to my question is what I need. Thanks!