Copy text to the system clipboard on click with JavaScript

#javascript #tutorial

In this short tutorial I’ll be showing you how to add copy to clipboard functionality when a button is clicked using JavaScript. This comes in handy within web apps when you need to copy a large string of text or when using touch screen devices.

Let get started by setting up some HTML:

<input
  type="text"
  id="key-txt"
  value="1seWYeywqmTnqv7a5FC6LkD2vsdEx6jXOwqkmhLN"
  size="45"
  readonly
/>
<button id="key-btn">COPY</button>

We can now begin the JavaScript functionality starting with declaring variables for the text and button element:

const keyTxt = document.getElementById("key-txt").value;
const keyBtn = document.getElementById("key-btn");

Next we’ll add a click event listener to the button:

keyBtn.addEventListener("click", async () => {
  if (!navigator.clipboard) {
    alert("Copy functionality not supported");
  }
  try {
    await navigator.clipboard.writeText(keyTxt);
  } catch (err) {
    console.error("ERROR", err);
  }
});

First we’re checking if the browser supports the navigator.clipboard which is part of the Clipboard API that provides the ability to respond to clipboard commands (cut, copy, and paste) as well as to asynchronously read from and write to the clipboard. If the browser does support navigator.clipboard the text is written to the clipboard.

That’s all for this tutorial, it should be noted that similar functionality could also be written using document.execCommand() however that method is no longer recommended as browsers drop support for it.