Create copy to clipboard button using JavaScript
By: Niraj Dhungana
Nov 29 2021
Share:
Sometimes even small things add the best user experience in our webapp. And copy to clipboard button is one of those. You can check out the demo by clicking on the button below.
Have you clicked on this button? Now paste using ctrl+v or by right click. There is something right? Let’s see how we can create this copy-to-clipboard button.
To create this example here we are using vanilla JavaScript but if you want to use React then read this post.
window.navigator
To create this we have an object called navigator. This object contains the information about browsers. Most of the major browsers support it. You can read more about it here.
Let’s create an HTML page where we will add a simple button which can copy the text.
1// inside your index.html
2 <button id="btn">Copy to clipboard</button>
3// also link script file (javascript file)
4 <script src="index.js"></script>
5Now we have our button. Let’s add some JavaScript code which will do the actual magic.
1const btn = document.getElementById("btn");
2btn.addEventListener("click", copyToClipboard);
3In this code we are simply selecting our button with it’s id btn and adding an click eventListener. Now we need to create this method copyToClipboard. Where we will write our actual logic.
1const copyToClipboard = () => {
2 navigator.clipboard.writeText( /* Here gose your text */ )
3};
4Handling error and success
navigator.clipboard.writeText() returns a promise. So, we can use the then() method to capture success and error both.
1const copyToClipboard = () => {
2 navigator.clipboard.writeText("ndpniraj.com")
3 .then(/* method if succeed */, /* method if fail */);
4};
5Now here if the copy process is successful then I want to change the text inside that button for two second. Otherwise if anything goes wrong I want to log that to the console.
Also you can display any kind of alert or notification to the user on the success or on the error.
1const copyToClipboard = () => {
2 navigator.clipboard.writeText("Subscribe to Full Stack Niraj")
3 .then(
4 () => {
5 // you can display any success alert here
6 btn.innerHTML = "Copied!";
7 setTimeout(() => {
8 btn.innerHTML = "Copy to clipboard";
9 }, 2000);
10 },
11 (e) => {
12 // you can display any error alert from here
13 console.log("fail", e.message);
14 }
15 );
16};
17Here you can see I am using this text "Subscribe to Full Stack Niraj". You can use any text or also user input value here to copy. Then we have a method for success.
Where we are changing the innerHTML of the button to the copied for two seconds and then changing back to the previous text. Also there is a method which logs errors if anything goes wrong.
Okay ladies and gentlemen this is how we can create copy to clipboard using pure vanilla JavaScript and HTML.
Complete source code.
1// index.html
2<!DOCTYPE html>
3<html lang="en">
4 <head>
5 <!-- Your head goes here -->
6 </head>
7 <body>
8 <button id="btn">Copy to clipboard</button>
9 <script src="index.js"></script>
10 </body>
11</html>
12
13// index.js
14const btn = document.getElementById("btn");
15
16const copyToClipboard = () => {
17 navigator.clipboard.writeText("ndpniraj.com")
18 .then(
19 () => {
20 btn.innerHTML = "Copied!";
21 setTimeout(() => {
22 btn.innerHTML = "Copy to clipboard";
23 }, 2000);
24 },
25 (e) => {
26 console.log("fail", e.message);
27 }
28 );
29};
30
31btn.addEventListener("click", copyToClipboard);
32
I hope you enjoyed reading this post and learned something new. If not then tell me how can I improve. @fsniraj