30-seconds-of-code/snippets/copyToClipboard.md

title, tags, firstSeen, lastUpdated

title	tags	firstSeen	lastUpdated
copyToClipboard	browser,string,event,advanced	2017-12-31T11:40:33+02:00	2020-10-22T20:23:47+03:00

Copies a string to the clipboard. Only works as a result of user action (i.e. inside a click event listener).

• Create a new <textarea> element, fill it with the supplied data and add it to the HTML document.
• Use Selection.getRangeAt()to store the selected range (if any).
• Use Document.execCommand('copy') to copy to the clipboard.
• Remove the <textarea> element from the HTML document.
• Finally, use Selection().addRange() to recover the original selected range (if any).
• ⚠️ NOTICE: The same functionality can be easily implemented by using the new asynchronous Clipboard API, which is still experimental but should be used in the future instead of this snippet. Find out more about it here.

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);
  }
};

copyToClipboard('Lorem ipsum'); // 'Lorem ipsum' copied to clipboard.