Copy to clipboard functionality you may have seen on many websites. I have also implemented clipboard functionality in many projects and it is very useful for some websites. 

In this post, I will be using simple and easy-to-understand code, as I have seen there is a lot of code that is available on the internet but they are very complex and we just use that as copy past but that code leaves lots of bugs in future.

There are many codes available on the internet but we will be using Clipboard API to read and write to the system clipboard.


Clipboard API consists of four asynchronous methods:


  • navigator.clipboard.read() - reading arbitrary data
  • navigator.clipboard.readText() - reading text
  • navigator.clipboard.write() - writing arbitrary data
  • navigator.clipboard.writeText() - writing text


We will be using writeText() method to implement a simple "Copy to Clipboard" functionality.


HTML Code:


<input type="text" id="copy-text">

<button id="copy-btn">Copy to Clipboard</button>


Javascript Code:


document.getElementById("copy-btn").addEventListener("click", function(e) {

  if (!navigator.clipboard) {

    console.error('Clipboard API is not available');

    return;

  }


  let text = document.getElementById("copy-text").value;

  navigator.clipboard.writeText(text).then(function() {

    console.log("Copied to clipboard");

  }, function(err) {

    console.error(err);

  })  

})


If you try to run this code, you should see the "Copied to clipboard" text in the console after clicking the copy button.


Code Explanation:


document.getElementById("copy-btn").addEventListener("click", function(e) {

  if (!navigator.clipboard) {

    console.error('Clipboard API is not available');

    return;

  }


First, we're attaching onclick event handler to our "#copy-btn" button, and checking navigator.clipboard is available. We don't want our code to break if it's not, so we will just log an error and return it.


 let text = document.getElementById("copy-text").value;


  navigator.clipboard.writeText(text).then(function() {

    console.log("Copied to clipboard");

  }, function(err) {

    console.error(err);

  })  


Then we're getting the text value from our "copy-text" input element, and using navigator.clipboard.writeText method to writing it to the system clipboard. Keep in mind that writeText is an async method that returns a promise, and you need to use the promise API directly (like the above), or use async/await.


Common mistake I've seen often is to do something like this:


navigator.clipboard.writeText(text)

console.log("Copied to clipboard")


Which will log "Copied to clipboard" immediately after calling writeText (regardless if the operation was successful or not).



Copy to Clipboard for div


HTML Code:


<div id="copy-text">This is coding dev</div>

<button id="copy-btn">Copy to Clipboard</button>


Javascript Code:


document.getElementById("copy-btn").addEventListener("click", function(e) {

  if (!navigator.clipboard) {

    console.error('Clipboard API is not available');

    return;

  }


  let text = document.getElementById("copy-text").innerHTML;

  navigator.clipboard.writeText(text).then(function() {

    console.log("Copied to clipboard");

  }, function(err) {

    console.error(err);

  })  

})



Now, you can easily use this code in your future or current project to easily add the functionality of the clipboard with clipboard API, no need to use long heavy code for this.

Let us know in the comment section any code you are searching for or if you have any doubts.