Update: 30NOV08 @ 1815 PST - Due to a Security Change in Flash Player 10, the copy to clipboard functionality I am using below will not work if you have Flash 10 installed. I am trying to find a workaround, but it looks like it may require creating a button in flash that the user can click to set the clipboard data. Any Flash developers able to help me out?

I have been using the jQuery Context Menu Plugin by Cory S.N. LaViska for a while now and have written about it several times in the past. Today, I am going to show you how to add a "Copy to Clipboard" command to the context menu that works in IE as well as FireFox and Chrome if flash is installed. I would guess that is works in Safari, but you will have to let me know in the comments.

You might provide this feature to the users of your application so that they could quickly capture formatted data to be pasted into an email, word document or live chat with a customer for example.

Adding this functionality for IE alone is pretty straight forward (except for the caveat in the issues section) as IE5 and later provides the clipboardData object. For my own uses (I do non public facing development) this would probably be fine in my known bubble. However, in the real world you might want this to work in a more cross browser fashion. The option that I know about is to use the jQuery Copy Plugin which uses the clipboardData object if available, otherwise it embeds a tiny flash file that will handle the copy for you. I like the simplicity of the plugin, but I decided to modify it for learning purposes and thought I would share. Be sure to checkout my modified version below or in the download.

Demo | Download (ASP.NET 3.5)

Screenshot of End Product:

When you paste the contents of the clipboard, this is what you end up with:

Contact Name: Maria Anders
Title: Sales Representative
PH: 030-0074321

The plugin is really straight forward to use. There is only one function that is provided which is $.copy() where you pass a string that gets copied to the clipboard. Below is the jQuery I used when Copy is clicked on the context menu:

var txt = "Contact Name: " + $(el).find("#contactName").text() + "\nTitle: " 
    + $(el).find("#contactTitle").text() + "\nPH: " + $(el).find("#phone").text();
$.copy(txt);

Note: "el" in this case is a wrapped set of the elements of the table row that was clicked.

Issues:

With IE, the ability for a web page to use the clipboard may come with a warning message or might be blocked altogether depending upon the user's security settings. Unfortunately if it is blocked, the stock jQuery copy plugin will not get you around this unless you tweak it to always go the flash route which I tried and does work.

IE Warning Message:

Security Settings in IE:

Along with the tweak to only use the flash method, I changed the plugin so that the jQuery $.noConflict() function can be used by placing it within (function($) {......... })(jQuery);. I also changed the embed code to look in a single location for the swf file. The stock plugin expects to find the swf file in the same directory as the page that calls it. Since I will likely be using the copy command in a lot of context menus spread throughout my application I thought this would be a good change as well.

So, below is my modified version of the jQuery copy plugin:

/*
* jQuery Copy to Clipboard Plugin
* Bill Beckelman http://beckelman.net
* 
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Date: 2008-11-29
* Version 1.0
*
* Depends upon copy.swf file
*/

(function($) {
    $.copy = function(t) {
        if (typeof t == 'undefined') {
            t = '';
        }

        var i = '<embed src="/_assets/swf/copy.swf" FlashVars="clipboard=' +
            encodeURIComponent(t) + '" width="0" height="0" type="application/x-shockwave-flash"></embed>';

        if ($('#flashcopier').length == 0) {
            $('body').append('<div id="flashcopier">' + i + '</div>')
        }
        else {
            $('#flashcopier').html(i)
        }
    }
})(jQuery);

Note: You will need to change the path to the swf file that goes with the plugin to wherever you end up putting it. For testing with localhost I think you may
need to to include the name of your web site in the path as well.

Be sure to checkout the demo and let me know in the comments what you think and what could be improved.