Are there any new solutions for copying multiple groups of text to clipboard via JavaScript / Flash, since Flash 10?

Question

Since Flash 10 was introduced, many of the popular 'copy to clipboard' scripts out there have stopped working due to new security restrictions. There is a Flash-only solution here:

http://cfruss.blogspot.com/2009/01/copy-to-clipboard-swf-button-cross.html

...though I'm looking for the ability to trigger the copy function via JS, rather than relying on the user to click on a Flash object to trigger.

For an example of what we currently employ, see:

http://snipt.net/public

Any of the 'copy' links use jQuery's copy plugin here:

http://plugins.jquery.com/project/copy

UPDATE: OK, so I tried ZeroClipboard. At first glance, it looked great. However, the amount of redundant code needed to enable multiple clipboard bindings is unacceptable. In some cases, there will be 40+ instances of text that each have their own 'copy' link. Still looking for a better solution...

Answer 1

That's terrible news, I hadn't even noticed. I use the Flash trick extensively too. As far as I know that was the only way to get copy to work without having to install some other plugin (besides the ubiquitous Flash) due to browser security concerns.

Update: After much panic, and a few google searches, I stumbled on http://code.google.com/p/zeroclipboard/ which provides a Flash 10 compatible trick to get the copy to work once again. Now to go around updating websites...

Answer 2

This solution only works for keystrokes that would invoke the desired operation. It works by moving the user's cursor into a textarea element before the user finishes the relevant keystroke. It only works for text input. I've got this working in firefox and chrome. IE can use the clipboardData object (which is preferable to this hack).

In your html somewhere you should create a textarea element with arbitrarily large rows and cols attributes. The 'clipboard-textarea' element will be the holding area for the pasted and copied data. I hide the element using some style attributes.

The script:

var desiredClipboardContents = 'It works';

function onCopyKeyPressed() {
   // The trick here is to populate the textarea with
   // the text you want copied before the user releases
   // the copy keystroke.
   var textarea = document.getElementById('clipboard-textarea');
   textarea.value = desiredClipboardContents;
   textarea.focus();
   textarea.select();
}

function onPasteKeyPressed() {
   var textarea = document.getElementById('clipboard-textarea');
   textarea.value = '';
   textarea.focus();
   // The trick here is to delay slurping the content
   // that arrives in the textarea element until after
   // the paste keystroke is completed. The 750 ms timeout
   // provides the necessary delay.
   setTimeout("finishedPasting", 750);
}

function finishedPasting() {
   var textarea = document.getElementById('clipboard-textarea');
   alert("Received from clipboard-paste: " + textarea.value);
}