InfoGears Inc. -- Javascript Access To The Clipboard (Cut/Copy/Paste) in Mozilla/Firefox or Internet Explorer

InfoGears (

) noun. Flexible, affordable software modules that seamlessly work together to provide powerful business solutions.

Home

Request More Information

Success Stories

Javascript Access To The Clipboard (Cut/Copy/Paste) in Mozilla/Firefox or Internet Explorer

Author: Josh Rosenbaum
Comments/Questions? Contact us here.

Introduction:
Well, I spent a long time trying to figure out how I could do something as simple as copying text to the clipboard. It was an easy matter for Internet Explorer, which doesn't bother with the security issues of it. Mozilla/Firefox on the other hand had no simple way that would allow me to do it without compromising security on a global basis. (ie. 'signed.applets.codebase_principal_support') Finally, after many hours I have come up with the following solution that allows copying of text or elements in Mozilla/Firefox and IE both via a simple interface.

About the Mozilla/Firefox Code:
The Mozilla/Firefox copy code is partially based off of some copy code in HTMLArea. (A rich text editor) I studied how they handled copy/paste and was able to figure out the rest.

We use the Midas editor properties in Mozilla/Firefox to allow us to fake base cut/copy/paste easily using standard javascript. This means we now have site specific access to the clipboard. (Currently cut and paste aren't implemented, but it wouldn't be hard to do.) To do this, we basically create a 1 pixel iframe and put it into edit mode. After we're done with our magic, we kill the iframe.

clipboard.js includes these functions currently:

copy_text_to_clipboard -- Copies text to clipboard.
copy_element_to_clipboard -- Copies an element (contents or value) to the clipboard.

Browsers:

Firefox 1.5+ (May work on Firefox 1.0+, but I have not tested.)
Other Gecko Browsers: Mozilla (should work), Seamonkey (should work), Netscape - ??
Internet Explorer 6+
Opera, Safari, Others - I could not find information on how to do this in Opera or Safari. Although, I must admit I did not look hard. Anyone with details, please use the contact form.

If you have any modifications to make this code better, please use the InfoGears contact form. In particular, I would like to hear about enabling cut/copy/paste in other browsers as well as fixes for incompatibilities in older browsers. (I didn't test for these.) Also, being able to have Mozilla/Firefox recognize the automatically generated iframe without having to do a setTimeout would be a big plus. (So we could return the correct value from the function call.)

NOTE: In Mozilla/Firefox you will need to activate the Midas (rich text) editor's copy feature for the domain that needs access to the clipboard.

Read the headers in the file for details.
If you want others to see this, please link back to this page rather than copying the file to your server. Download Version 0.1 of clipboard.js