So I knew it would happen at some point. Some handy flash developer would figure out how to get around the security limitation in Flash 10 that requires the System.setClipboard() method (ActionScript) to only be called by an action that originates from a user interaction. Last week I ran across an article on Ajaxian that linked to ZeroClipboard developed by Joseph Huckaby that worked as promised.

From the ZeroClipboard web site:

This library is fully compatible with Flash Player 10, which requires that the clipboard copy operation be initiated by a user click event inside the Flash movie. This is achieved by automatically floating the invisible movie on top of a DOM element of your choice. Standard mouse events are even propagated out to your DOM element, so you can still have rollover and mouse down effects.

With today’s post I will show you a contrived example to get you started. I eventually hope to add this to the contextMenu.js jQuery plugin that I use, but for now this should be pretty straight forward. I do want to note that in the demo and download I am loading the latest version of the jQuery library (1.3.1) from Google’s CDN for the first time in any of my posts. For more information on how to do this see the instructions from Google. I am also shortcutting the ready event which is a tip I found from a great post Improve your jQuery - 25 excellent tips.

Live Demo | Download (HTML, CSS, JS)

Screenshots of End Product:

jQuery Used to Attach a ZeroClipboard Instance to Each Copy Icon:

<script type="text/javascript">
    $(function() {

        $("#customerTable tbody td:last-child").each(function() {
            //Create a new clipboard client
            var clip = new ZeroClipboard.Client();

            //Cache the last td and the parent row    
            var lastTd = $(this);
            var parentRow = lastTd.parent("tr");

            //Glue the clipboard client to the last td in each row
            clip.glue(lastTd[0]);

            //Grab the text from the parent row of the icon
            var txt = $.trim($("td:first-child", parentRow).text()) + "\r\n" + $.trim($("td:nth-child(2)", parentRow).text()) + "\r\n" +
            $.trim($("td:nth-child(3)", parentRow).text()) + "\r\n" + $.trim($("td:nth-child(4)", parentRow).text());
            clip.setText(txt);

            //Add a complete event to let the user know the text was copied
            clip.addEventListener('complete', function(client, text) {
                alert("Copied text to clipboard:\n" + text);
            });
        });
    });                               
</script>

Please let me know in the comments what you think and what you might do different. Be sure to checkout the demo and download.