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));
🔗 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)
Looks way easier than I realized, I need to do this.
Yeah. It's very easy to implement.
Btw, thank you for your comment.
I appreciate that you did this in plains JS and not some framework 🤗
Thank you.
Great post!
Here is a link that shows which browsers give support to navigator.clipboard:
whatwebcando.today/clipboard.html
Thanks!!
😊
I'm wanting people to copy and paste my animated emoji emoticons on one of my internet sites. How can I do that? Thanks!
Thanks for the Like in regards to My Question! However, Answers to my question is what I need. Thanks!