When HTML added “design mode” for What You See Is What You Get (WYSIWYG) editing, a simple way to copy text to the device’s clipboard was introduced.
Recently, I’ve ran into multiple scenarios where copying information from a web page to the device’s clipboard has been needed. In the old days, this required use of ActiveX or Flash (or a similar process on the device that was available to the web page). However, with the relatively recent wide adoption of
document.execCommand() this has become a trivial problem to solve cross browser.
First up, the code:
var tmp = document.createElement("textarea"); tmp.value = "The string that you want in the clipboard goes here"; tmp.style.height = "0"; tmp.style.overflow = "hidden"; tmp.style.position = "fixed"; document.body.appendChild(tmp); tmp.focus(); tmp.select(); document.execCommand("copy"); document.body.removeChild(tmp);
Note, this isn’t necessarily the most robust solution, however it is perfect and simple for copying plain text to the clipboard (and can include line breaks). If the item you’re looking to copy needs to include HTML structure, images, etc there’s an experimental technology called Selection API that you’ll need to work with, rather than a simple
Second note, I’ve written the code in this post to work for the vast majority of browsers in the wild at time of authoring with no assumption of transpiling. If you’re using a transpiler or only support modern browsers, it would be good practice to change all instances of
let (as appropriate).
Explanation of the copy to clipboard code
First a textarea element is created and a value is applied to it. This value can be any string:
var tmp = document.createElement("textarea"); tmp.value = "The string that you want in the clipboard goes here";
Then add styling to the element to prevent the browser jumping down to the textarea when we focus the it later by pinning it to the user’s view with fixed.
tmp.style.position = "fixed";
Out of an abundance of caution, also set the textarea to have a height of zero (to effectively hide it).
Hypothetically the browser could render the textarea for a brief moment if we don’t force it to be zero height, although I’ve never observed it.
tmp.style.height = "0"; tmp.style.overflow = "hidden";
Next, put the textarea within the body of the HTML document so that it can be focused/selected by the user’s browser.
Then focus, the textarea, select all of its text, and copy the text.
tmp.focus(); tmp.select(); document.execCommand("copy");
Lastly, remove the textarea DOM element.
A note about document.execCommand(“copy”)
Most browsers’ security features do not allow a page to copy data to the clipboard without the user taking an action (such as clicking on a button). Keep this in mind if you’re attempting to copy information to the clipboard without the user taking any action.
Example, bind button click to copy a block of code