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>
<div>
<button onclick="triggerExample()">Click to Copy</button>
</div>function triggerExample() {
const element = document.querySelector('#example');
element.select();
element.setSelectionRange(0, 99999);
document.execCommand('copy');
}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>
<div>
<button onclick="triggerExample1()">Click Me</button>
</div>function triggerExample1() {
// get the container
const element = document.querySelector('#example1');
// Create a fake `textarea` and set the contents to the text
// you want to copy
const storage = document.createElement('textarea');
storage.value = element.innerHTML;
element.appendChild(storage);
// Copy the text in the fake `textarea` and remove the `textarea`
storage.select();
storage.setSelectionRange(0, 99999);
document.execCommand('copy');
element.removeChild(storage);
}
Did you find this tutorial useful? Say thanks by starring our repo on GitHub!