Using the OS clipboard is a basic IT skill. As a developer, you’ve learned that tab, Ctrl/Cmd+A, Ctrl/Cmd+C followed by Ctrl/Cmd+V will highlight, copy and paste in an instant.
Life is less easy for regular users. Even if a user knows what the clipboard is, those with 20:20 vision and cat-like reflexes can struggle to highlight the exact text they want. The copying process is rarely intuitive if they don’t know keyboard shortcuts, can’t see the hidden browser Edit menu, have never used a right-click menu or don’t know about long-hold options on touch-screens.
Perhaps we could help everyone by offering one-click “copy to clipboard” buttons? That would be useful for even the quickest keyboard-happy power user!
A few years ago it was impossible for browsers to directly use the clipboard. Developers had to resort to Flash applets to provide basic functionality.
The clipboard seems innocuous but imagine what could happen if a browser was able to view and manipulate the content at will. It would be possible for scripts (including third-party ones) to peek at the text and post passwords, sensitive information or even whole documents to a remote server.
Today, basic clipboard integration is possible but there are limitations:
- Most browsers support the clipboard but forget Safari on Mac and iOS.
- Support varies across browsers and some features are incomplete or buggy.
- The user must initiate an event such as clicking a mouse button or pressing the keyboard. A script cannot arbitrarily use the clipboard at any time.
The key method is
document.execCommand() which can be passed
'paste'. We’ll concentrate on
document.execCommand('copy') since it’s the most useful option.
Before using it, we should check whether the browser supports the command copying using either
document.queryCommandEnabled('copy'); (yes, that’s two methods which do the same thing). Unfortunately, both return
false in Chrome even though it’s supported. We could check the availability of
document.execCommand but the most viable option is to wrap
document.execCommand('copy') in a
Next, what should we allow the user to copy? Our script must highlight text and all browsers permit textual
textarea fields to be selected using the
select() method. Firefox and Chrome/Opera also support
document.createRange which allows text to be selected from any element, e.g.
// select text in #myelement node
myelement = document.getElementById(‘#myelement’),
range = document.createRange();
However, this isn’t supported in IE/Edge.
If you’ve given up all hope of implementing a robust cross-browser clipboard solution, clipboard.js can ease the pain. It has several options such as HTML5 data attributes which identify an activation trigger and which element will be copied, e.g.
<input id="copyme" value="text in this field will be copied" />
Roll Your Own
clipboard.js is a mere 2Kb but we can implement a solution in less than twenty lines of code if we’re happy to accept the following criteria:
- only appropriate form fields can be copied
- it’ll fail in some browsers (I’m looking at you Safari) but we can highlight the input text and show a message advising the user to press Ctrl/Cmd + C.