Learn how to implement copy to clipboard functionality in your websites using the Clipboard API.

Introduction

There are times when we need to copy and paste information from websites, such as API keys or activation tokens. Some websites provide a convenient way to copy text by clicking inside a box, which automatically copies the text to the clipboard. In this blog post, we will explore how to add this functionality to our own websites using the Clipboard API.

Note: Another option to enable copy/paste functionality is by using document.execCommand(). However, in this post, we will focus on using the Clipboard API, which is meant to replace the document.execCommand() functionality.

Checking Clipboard API Availability

The Clipboard API is accessible through the navigator.clipboard object. It is important to note that not all browsers support this API. Currently, it is supported by Chrome, modern Edge (chromium-based), Firefox, and Opera.

To ensure that the functionality is available, you can check for the existence of navigator.clipboard using the following code:

if (!navigator.clipboard) {
  // Clipboard API not available
  return;
}

Writing to the Clipboard

To copy text to the clipboard, we first need the user’s permission. This permission can be obtained by requesting the clipboard action in response to a user action, such as a click event.

For example, let’s say we have a <p> element in our HTML page:

<p>Some text</p>

To copy the content of this <p> tag to the clipboard, we can add a click event listener to it and utilize the Clipboard API. The following code demonstrates this:

document.querySelector('p').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API not available
    return;
  }
  const text = event.target.innerText;
  try {
    await navigator.clipboard.writeText(text);
    event.target.textContent = 'Copied to clipboard';
  } catch (err) {
    console.error('Failed to copy!', err);
  }
});

Here is a CodePen example that you can try out.

Reading from the Clipboard

To read from the clipboard, we again need the user’s permission. For security reasons, granting permission to read from the clipboard is crucial to prevent unauthorized access.

Let’s assume we have a <p> element on our page:

<p>Some text</p>

When the user clicks on this element, we want to replace its content with the text stored in the clipboard.

To achieve this, we can add a click event listener to the <p> element, check for the availability of the Clipboard API, and then use the navigator.clipboard.readText() method to read the text from the clipboard. Finally, we can update the element’s content with the retrieved text.

Here is the code to accomplish this:

document.querySelector('p').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API not available
    return;
  }
  try {
    const text = await navigator.clipboard.readText();
    event.target.textContent = text;
  } catch (err) {
    console.error('Failed to copy!', err);
  }
});

You can see and try out this example on CodePen.

Please keep in mind that the first time you execute the code on your site, a permission box will appear asking for permission to access the Clipboard API. Granting this permission is necessary to ensure that websites cannot read your clipboard without your explicit consent.

Tags: JavaScript, Clipboard API