In this article, I will be explaining in depth how the
copyToClipboard snippet from 30 seconds of code works. You can find the source code for it and a ton of other useful methods in the project’s repository.
- Create a
<textarea>element to be appended to the document. Set its
valueto the string that we want to copy to the clipboard.
- Append said
<textarea>element to the current HTML document.
HTMLInputElement.select()to select the contents of the
Document.execCommand('copy')to copy the contents of the
<textarea>to the clipboard.
- Remove the
<textarea>element from the document.
The simplest version of this method should look like this:
Bear in mind that this method will not work everywhere, but only as a result of a user action (like inside a
click event listener), due to the way
Making the appended element invisible
If you try out the above method, you will probably see some flashing, when the
<textarea> element is appended and then removed. This problem is especially bad for people on screenreaders, as it can cause some really annoying issues. So, the next logical step is to use some CSS to make this element invisible and make it
readonly in case the users try to mess with it:
Saving and restoring the original document’s selection
Selection.addRange() to save and restore the original document selection. Here’s the final, annotated code implementing these improvements:
And that’s pretty much all there is to it. In less than 20 lines of code, we have created one of the most commonly needed methods in frontend development.