Copying text to clipboard using jQuery zClip plugin

When developing the site, an unusual task was set - to copy its content by clicking on the text field. The search suggested that cross-browser and with the least time loss copying to the clipboard using javascript is possible using jQuery plug-ins using flash. Maybe this is not the most correct decision, but we stopped on it. I want to talk about the experience of using the zClip plugin, its configuration, problems encountered and solved.

About this plugin there was already an article on Habré - Copy to the clipboard in FireFox 3.5 and IE8 , but in some places it is outdated. Experienced developers will not find here something new and very interesting, the rest I ask for cat.

So, the zClip plugin. Under the link you can see examples of use, download the plugin itself, and of a small description in English.

')
Plugin hooked up, go to the implementation. There was a small snag - all the examples are implemented like this - there is a button on which the event handler is hung up - we copy something. My task is to copy its contents by clicking on the text field. Let's try:

$(document).ready(function() { $("#copy-link1").zclip({ path: "http://www.steamdev.com/zclip/js/ZeroClipboard.swf", copy: function(){ return $(this).val(); }, afterCopy: function(){ $('#copy-text1').text(' '); } }); }); 

Once - screwed to the input by id.
By clicking on the input, the text is copied to the buffer, but the cursor is not placed in the field, there is no possibility to view the full text in the field. The content is copied, the user is notified of the copying, but somehow it is not.

Two - solved the problem by pressing on the contents of the field, and the handler on clicking on the input - hide.

 afterCopy: function(){ $('#copy-text2').text(' '); $("#copy-link2").zclip('hide'); $(this).select(); } 

Already better, and even somehow clear that copied to the buffer.

Three - and there’s still such a cant got out - the text field will be used on the page with jQuery UI tabs. And if when loading the page, the tab with our field is hidden - it does not work.

 $( "#tabs" ).tabs({ select: function (event, ui) { }, show: function(event, ui) { //      ,      if(ui.index == 2) { $("#copy-link4").zclip({ path: "http://www.steamdev.com/zclip/js/ZeroClipboard.swf", copy: function(){ return $(this).val(); }, afterCopy: function(){ $('#copy-text4').text(' '); $("#copy-link4").zclip('hide'); $(this).select(); } }); } } }); 

I hope the article will be useful to someone. Waiting for comments and suggestions. Thanks for attention.