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