JavaScript Copy to Clipboard

Oct 17, 2022

To copy text from an input or textarea, you should call the element's select() and setSelectionRange() methods, followed by execCommand('copy'). select() and setSelectionRange() select the text in the input, and execCommand('copy') copies the current selection to the clipboard.

Below is a live example.

<textarea id="example">Lorem ipsum dolor sit amet</textarea>
  <button onclick="triggerExample()">Click to Copy</button>
function triggerExample() {
  const element = document.querySelector('#example');;
  element.setSelectionRange(0, 99999);

Copy from a non-input field

To copy from a non-input field, you must create a temporary textarea or input and set the contents of that temporary input to the text you want to copy using the document.createElement() function. You need to append the input to the page. You can remove it from the page after you've executed execCommand('copy').

Here's how you copy me!
<div id="example1">Here's how you copy me!</div>
  <button onclick="triggerExample1()">Click Me</button>
function triggerExample1() {
  // Create a fake `textarea` and set the contents to the text
  // you want to copy
  const storage = document.createElement('textarea');
  storage.value = element.innerHTML;
  const element = document.querySelector('#example1');

  // Copy the text in the fake `textarea` and remove the `textarea`;
  storage.setSelectionRange(0, 99999);

More Fundamentals Tutorials