‘Copy To Clipboard’ functionality for your Website

Tweet

‘Copy Text To Clipboard’ is a frequently requested feature. Different browsers have different security implications when it comes to manipulating the clipboard. For example Firefox by default, does not allow you to store data in the clipboard, although you can override this setting.

Users have used JavaScript and Flash as a workaround. Until Flash 9, you could set data on the system clipboard at any time. However with the changes in Flash 10, you can manipulate the clipboard only through ActionScript that originates from user interaction, i.e. an explicit mouse click or through the keyboard.

I recently came across a free and open source library that is fully compatible with Flash Player 10 and provides an easy way to copy text to the clipboard using an ‘invisible’ Adobe Flash movie and a JavaScript interface. The library is called ‘zeroclipboard’. How this library works is that it overlays a Flash object over a button or any other DOM element that initiates the copy. So when the user clicks the element, the Flash object registers an explicit action and copies text into the clipboard, which sounds perfectly ‘legal’ as I may say so.

This library requires that the browser has JavaScript enabled and FlashPlayer installed. You can learn how to use the library through the Instructions Wiki. Also see a working Demo.

As always, I would love to hear some alternate solutions. Feel free to drop in your comments!

Tweet

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.