I received an enquiry today about a requirement to copy text to the clipboard from JavaScript. The customer seemingly wanted to press a button on their browser to have the data ready in their clipboard for pasting elsewhere.
It seems that this is indeed possible, but only after what I would say is an unashamed bodge using Macromedia Flash.
The sites detailing the solution for are sufficiently numerous to preclude me from replicating the code here. Some of which include:
- http://www.logiclabz.com/javascript/copy-to-clipboard-with-javascript-on-mozilla-firefox-and-ie.aspx
- http://www.dynamic-tools.net/toolbox/copyToClipboard/
In a nutshell, the solution is as follows:
- Perform some Object Detection for the clipboard object. If it exists, we can use it. If it doesn’t we go to 2. Generally, the browsers that are more fastidious about security will block access to the clipboard. In years to come I expect this to be all new browsers.
- Use an embedded flash object to
monkey around withmanipulate the clipboard in analarmingclever way.
As it turns out, most of the solutions around will not actually work in Flash 10, where you can only copy to the clipboard if the action originates from user interaction with another Flash object. (Read related section from Adobe’s Flash 10 announcement)
Flash 10 seems to have a number of changes that cut down on workarounds for some JavaScript limitations.
Zero Clipboard is reported to circumvent the restrictions. Here is the explanation for this, taken from this StackOverflow Post:
Zero Clipboard is currently the only library that tries to solve this, by overlaying a Flash object above the Copy button, or whatever element initiates the copy. The current problem with Zero Clipboard is that it uses absolute positioning on the viewport, which breaks when the page is resized. It would be more natural if Zero Clipboard did a 100% height/width overlay inside the wrapper that caught the event.
Got that? In short, it all sounds a bit unreliable to me.
So there it is. Anyone straying here hoping to find out how to do a copy WITHOUT flash can expect to be sorely disappointed. And, to be honest, I’d be nervous about it anyway; who’s to say that a less-than-reputable website wouldn’t put down JavaScript to silently copy the contents of your clipboard into an HTTP request periodically. I’m pretty sure a number of people copy/paste passwords from some stored text-files on their PC.
So what was my solution to the problem? Well, as it turned out, the client actually wanted to copy from a few simultaneous cells in row on an HTML table. When you try to highlight these cells, cells in adjacent rows become highlighted. Give it a try in the hastily-constructed table below:
| Data1 | Address Line 1 | |
| Data2 | Address Line 2 | |
| Data3 | Address Line 3 |
The client was wanting to highlight the three address lines and copy them. Actually performing the copy/paste using Control-C and Control-V was the recognised user experience, and putting a ‘Copy’ button on the page would have removed that.
We got around it by embedding a table within a cell and using the trusty old ROWSPAN attribute on the cell. Try it now:
| Data1 |
|
||||
| Data2 | |||||
| Data3 |
It is, of course, slightly misaligned, but a few hasty styling fixes should address this.
If you’re interested here is the noddy HTML:
| Data1 |
|
||||
| Data2 | |||||
| Data3 |
And finally, the irony of the fact that there is a ‘Copy To Clipboard’ option on the syntax highlighted code above is not lost to me!
