43 lines
1.6 KiB
Markdown
43 lines
1.6 KiB
Markdown
---
|
|
title: copyToClipboard
|
|
tags: browser,string,event,advanced
|
|
firstSeen: 2017-12-31T11:40:33+02:00
|
|
lastUpdated: 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](https://github.com/w3c/clipboard-apis/blob/master/explainer.adoc#writing-to-the-clipboard).
|
|
|
|
```js
|
|
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);
|
|
}
|
|
};
|
|
```
|
|
|
|
```js
|
|
copyToClipboard('Lorem ipsum'); // 'Lorem ipsum' copied to clipboard.
|
|
```
|