Skip to main content

Clipboard API - Copy text to clipboard with JavaScript

Copy buttons are often used in many websites and applications, in this tutorial, you would learn how to copy text in your website or web app across all browsers.

Demo

The Wide Support Way​

To appreciate the improved way of copying text to clipboard, we need to take a brief look at how we used to have to do things.

function wideSupportCopyToClipboard(textToCopy) {
  // Add a temporary textarea element so that we can later run the copy command
  const textarea = document.createElement('textarea');

  //Add value we want to copy to the textarea
  textarea.value = textToCopy;
  // Avoid keyboard open in iOS
  textarea.readOnly = true;
  textarea.contentEditable = 'true';

  //Append invisible textarea to the document
  textarea.style.position = 'absolute';
  textarea.style.left = '-9999px';
  document.body.appendChild(textarea);

  //select the text to be copied
  textarea.select();

  // Copy the selected text inside the textarea to the clipboard
  document.execCommand('copy');

  //Remove temporary textarea from the document
  textarea.remove();
}

Clipboard API​

The Clipboard API to provide copy, cut and paste events as well as provide access to the OS clipboard. This API is intended to replace the need of the document.execCommand() method which is now being deprecated.

The awesome part of the Clipboard API is that it provides Async Clipboard API with a well-defined permissions model that doesn't block the page, it allows us to provide better user experience when transferring time consuming resources. You can check for more details here.

The Clipboard API browser compatibility is also now supported in major browsers after Safari recently announced support for it in version 13.1.

The New Way​

function newWayCopyToClipboard(textToCopy) {
  navigator.clipboard
    .writeText(textToCopy)
    .then(() => {
      console.log('Text copied to clipboard');
    })
    .catch(error => {
      console.error('Failed to copy: ', error);
    });
}

Final​

We can keep the wide support version to make sure everything goes well when something goes wrong.

async function copyToClipboard(textToCopy) {
  if (navigator.clipboard && navigator.clipboard.writeText) {
    try {
      await navigator.clipboard.writeText(textToCopy);
      console.log('Text copied to clipboard with Clipboard API');
    } catch {
      console.error('Failed to copy: ', error);
      wideSupportCopyToClipboard(textToCopy);
    }
  } else {
    wideSupportCopyToClipboard(textToCopy);
  }
}

References​