Javascript Copy to Clipboard

Written by Ryan on July 17th, 2009

I was working a project recently that required being able to copy something to the clipboard using javascript in a browser compatible way. After much searching and trying different solutions, I found one called Zero Clipboard that works perfectly.

http://code.google.com/p/zeroclipboard/

Since there is no universal way to change the clipboard in javascript, the commonly accepted solution is to use a Flash movie to do the actual copying. You used to be able to make that completely transparent the to the user and just use Flash in the background but in Flash 10, Adobe changed Flash security so clipboard altering events had to be initiated by actually clicking somewhere in the Flash movie.

http://www.adobe.com/devnet/flashplayer/articles/fplayer10_uia_requirements.html

Obnoxiously, they changed file uploading in the same way, but I digress.

Zero Clipboard addresses all these issues by letting javascript create a transparent Flash movie, exactly covering any element in the DOM, and then letting that movie intercept button presses and initiate a copy command. The user can see you’ve used Flash by right clicking on the button/movie beyond that, it’s invisible to the user.

If you’re ever trying to do copy to clipboard in javascript, I highly recommend it. Very easy, very functional.

 

Leave a Comment