DEV Community

Cover image for "Copy to Clipboard" functionality in plain JavaScript
Nick | OneThingWell.dev
Nick | OneThingWell.dev

Posted on • Originally published at betterways.dev

"Copy to Clipboard" functionality in plain JavaScript

In modern browsers, you can use 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

It's very easy to use the writeText() method to implement a simple "Copy to Clipboard" functionality.

HTML:

<input type="text" id="copy-text">
<button id="copy-btn">Copy to Clipboard</button>
Enter fullscreen mode Exit fullscreen mode

JavaScript:

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

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

Explanation

document.getElementById("copy-btn").addEventListener("click", function(e) {
  if (!navigator.clipboard) {
    console.error('Clipboard API is not available');
    return;
  }
Enter fullscreen mode Exit fullscreen mode

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.

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

  navigator.clipboard.writeText(text).then(function() {
    console.log("Copied to clipboard");
  }, function(err) {
    console.error(err);
  })  
Enter fullscreen mode Exit fullscreen mode

Then we're getting the text value from our "copy-text" input element, and using navigator.clipboard.writeText method to write 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")
Enter fullscreen mode Exit fullscreen mode

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

Permissions API

"clipboard-write" permission is automatically granted to pages when they are in the active tab, but if you need to explicitly check for the permission, you can use something like this:

navigator.permissions.query({ name: "clipboard-write" }).then(p => console.log(p.state))
Enter fullscreen mode Exit fullscreen mode



Note: This is a snapshot of the wiki page from the BetterWays.dev wiki, you can find the latest, better formatted version here: betterways.dev/copy-to-clipboard-in-plain-javascript.

Top comments (0)