Wednesday, March 21st, 2007

Auto copy to clipboard

Category: JavaScript, Tip

<p>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
< view plain text >
  1. function copy(inElement) {
  2.   if (inElement.createTextRange) {
  3.     var range = inElement.createTextRange();
  4.     if (range && BodyLoaded==1)
  5.      range.execCommand('Copy');
  6.   } else {
  7.     var flashcopier = 'flashcopier';
  8.     if(!document.getElementById(flashcopier)) {
  9.       var divholder = document.createElement('div');
  10.       divholder.id = flashcopier;
  11.       document.body.appendChild(divholder);
  12.     }
  13.     document.getElementById(flashcopier).innerHTML = '';
  14.     var divinfo = '<embed src="_clipboard.swf" FlashVars="clipboard='+escape(inElement.value)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
  15.     document.getElementById(flashcopier).innerHTML = divinfo;
  16.   }
  17. }

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”.

urlTea

Related Content:

14 Comments »

Comments feed TrackBack URI

Blog Post URL: http://www.jeffothy.com/weblog/clipboard-copy/

Comment by jdalton — March 21, 2007

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.

Comment by Geoff — March 21, 2007

does anyone else have problems getting this script to work in firefox? It works fine in IE.

Comment by printer ink guy — March 22, 2007

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).

Comment by Ryan Wilke — March 27, 2007

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.

Comment by Zefiro — March 27, 2007

Internet Exploder says BodyLoaded is undefined – on any page I try to use this on and on the urltea site as well.

Comment by Shawn — April 5, 2007

Has anyone had any problems with getting the + sign to copy with this function?

Comment by tl — May 9, 2007

BodyLoaded must be some global variable specified to urlTea. Just remove it and the function will work in IE.

Comment by Jonathan Aquino — May 26, 2007

@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

Comment by rdivilbiss — July 21, 2007

Your post have make me something a idea.Thank a lot.

Comment by David — October 17, 2007

@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.

Comment by Whatevaa — June 13, 2008

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.

Comment by pkhunter — November 14, 2008

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/

Comment by emattias — November 19, 2008

I’ve posted a blog regarding the issue and a solution: http://cfruss.blogspot.com/2009/01/copy-to-clipboard-swf-button-cross.html

There are new security constraints in Flash 10 that require the clipboard to be manipulated only as a response to user action.

Comment by cfruss — January 11, 2009

Leave a comment

You must be logged in to post a comment.