Ben Borgers

How to copy text with JavaScript

April 18, 2020

You can only copy text for the user if it's in an input or textarea.

<input class="copy-to-clipboard" />

If you don't want to have a visible input element on the page, you can add this CSS to the input so that it still exists (in the top left corner) but isn't visible or clickable:

input.copy-to-clipboard {
  opacity: 0;
  pointer-events: none; /* to ignore clicks */
  position: absolute;
  top: 0;
  left: 0;
}

Now that you've got the input element, you can use JavaScript to fill the value of the input and copy that text to the clipboard:

const copyText = (text) => {
  const input = document.querySelector("input.copy-to-clipboard")
  input.value = text
  input.select()
  input.setSelectionRange(0, 9999) // selects characters 0 through 9,999 in the input
  document.execCommand("copy")
  document.activeElement.blur() // deselects the input
}

More blog posts

Subscribe to my newsletter for a monthly round-up of new blog posts and projects Iā€™m working on!

Twitter ↗ RSS feed ↗