snippetjavascriptTip

How can I copy text to clipboard with JavaScript?

Submitted by: @import:30-seconds-of-code·Mar 2, 2026·

Viewed 0 times

copyjavascriptclipboardhowwithcantext

Problem

A very common need when building websites is the ability to copy text to clipboard with a single button click. Doing this programmatically with JavaScript is quite easy in modern browsers, using the asynchronous Clipboard API. If, however, you need to support older browsers, there is an alternative option, but it's a little more complicated.
<baseline-support featureId="async-clipboard">
</baseline-support>
Full support for the Clipboard API still isn't here at the time of writing (January, 2024), but you can at least use it to write to the clipboard. Thankfully, that's all you really need. Despite support caveats, this is the recommended way to copy text to clipboard, as it provides an easy and secure solution.
All you have to do is ensure Navigator, Navigator.clipboard and Navigator.clipboard.writeText are truthy and then call Clipboard.writeText() to copy the value to clipboard. In case anything goes wrong, you can use Promise.reject() to return a promise that rejects immediately and keep the return type consistent.

Solution

const copyToClipboard = str => {
  if (navigator && navigator.clipboard && navigator.clipboard.writeText)
    return navigator.clipboard.writeText(str);
  return Promise.reject('The Clipboard API is not available.');
};

</baseline-support>
Full support for the Clipboard API still isn't here at the time of writing (January, 2024), but you can at least use it to write to the clipboard. Thankfully, that's all you really need. Despite support caveats, this is the recommended way to copy text to clipboard, as it provides an easy and secure solution.
All you have to do is ensure Navigator, Navigator.clipboard and Navigator.clipboard.writeText are truthy and then call Clipboard.writeText() to copy the value to clipboard. In case anything goes wrong, you can use Promise.reject() to return a promise that rejects immediately and keep the return type consistent.
If you're concerned about browser support, you can use Promise.prototype.catch() to handle the error and provide a fallback. The fallback could even be using the legacy method, which we'll cover next.
While support for the Clipboard API is pretty high across the board, you might need a fallback if you have to support older browsers. If that's the case, you can use Document.execCommand('copy') to do so. Here's a quick step-by-step guide:

Create a <textarea> element to be appended to the document. Set its value to the string you want to copy to the clipboard.

Code Snippets

const copyToClipboard = str => {
  if (navigator && navigator.clipboard && navigator.clipboard.writeText)
    return navigator.clipboard.writeText(str);
  return Promise.reject('The Clipboard API is not available.');
};

const copyToClipboard = str => {
  const el = document.createElement('textarea');
  el.value = str;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  const selected =
    document.getSelection().rangeCount > 0
      ? document.getSelection().getRangeAt(0)
      : false;
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
  if (selected) {
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(selected);
  }
};

Context

From 30-seconds-of-code: copy-text-to-clipboard

Revisions (0)

No revisions yet.