Wednesday, March 21st, 2007
Auto copy to clipboard
Category: JavaScript
, Tip
This is an ancient tip, but a good-y. Jeffrey Larson put together a little hack to do auto copy to clipboard in a cross browser way (i.e. failing back to Flash).
It is the kind of thing that can easily be abused, and you can make your users mad (You just nuked something important out of my clipboard!).
JAVASCRIPT:
-
-
function copy(inElement) {
-
if (inElement.createTextRange) {
-
var range = inElement.createTextRange();
-
if (range && BodyLoaded==1)
-
range.execCommand('Copy');
-
} else {
-
var flashcopier = 'flashcopier';
-
if(!document.getElementById(flashcopier)) {
-
var divholder = document.createElement('div');
-
divholder.id = flashcopier;
-
document.body.appendChild(divholder);
-
}
-
document.getElementById(flashcopier).innerHTML = '';
-
var divinfo = '<embed src="_clipboard.swf" FlashVars="clipboard='+escape(inElement.value)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
-
document.getElementById(flashcopier).innerHTML = divinfo;
-
}
-
}
-
I just saw it used at Brett Taylor's urlTea service, and it was kinda nice to have the result right there. It made me wish I knew if there was a key stroke to "send to url in clipboard".
3.6 rating from 48 votes
http://ajaxian.com/foo-bar-baz doesn’t exist? ;)
Blog Post URL: http://www.jeffothy.com/weblog/clipboard-copy/
Hmm, he should use SWFObject to embed the swf, then he could detect the plugin and display a notice if the user doesn’t have flash.
does anyone else have problems getting this script to work in firefox? It works fine in IE.
Photobucket has been using the same concept for a couple months now. I ran into a brick wall when I tried using Javascript to access the clipboard. It’s a pretty nice little trick but it instantly made me wonder how much longer we’ll be able to continue using it. FYI it should work in nearly every browser (at least it does on Photobucket).
Works for me in Firefox 1.5. You need to
a) copy the mentioned http://urltea.com/_clipboard.swf to your local webspace
b) create a form input element (whose value will be copied to the clipboard) and pass this element to the function - neither the element id nor the value itself.
But it can easily be modified that you can directly pass the value.
Internet Exploder says BodyLoaded is undefined - on any page I try to use this on and on the urltea site as well.
Has anyone had any problems with getting the + sign to copy with this function?
BodyLoaded must be some global variable specified to urlTea. Just remove it and the function will work in IE.
@Geoff,
“Hmm, he should use SWFObject to embed the swf, then he could detect the plugin and display a notice if the user doesn’t have flash.”
http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp
combines the two as you suggest.
Regards,
Rod
Your post have make me something a idea.Thank a lot.
@Shawn
I had the same problem. Chars like á é àú ý þ æ ö will also be a problem. I found a working solution at http://www.webutils.pl. It seem like replacing escape with encodeURIComponent fixes the problem.
Yes but all this is now broken with Flash 10. Google spits out a solution here - http://groups.google.com/group/Snipurl/web/copy-to-clipboard-not-working - but this is not exactly what I want. Is there a proper solution to this or has Adobe broken this functionality big time? Thanks for any inputs.
Videos.wordpress.com seam to have a working solution. When I try it in FF and IE it works, even without a confirmation..
toggle the embed box in a video and click the “copy to clipboard” on this page: http://matt.wordpress.com/2007/09/27/videos-from-upgrade-party/