JS Plugin zclip implement copy to clipboard function

believe that the function of everyone usually on the internet can often meet, and did not pay much attention how to achieve, until the project needs.

Online A search a lot of, simple use JS method is not no, but because of the security mechanism of each browser is different, not cross-browser. To see a few commonly used sites, are using the transparent flash mask "Copy to the Clipboard" button, so when you click on the "Copy to Clipboard" When you click on the Flash, and then you need to copy the content into the flash, The incoming content is then copied to the Clipboard through the copy function of Flash.

1. Preparatory work

Get ready for jquery, and then go to http://www.steamdev.com/zclip/here to download jquery.zclip.js and zeroclipboard.swf, But the zeroclipboard.swf there is dead, you can go here http://pan.baidu.com/share/link?shareid=1286340661&uk=2133883598&fid= 2382679931 downloads, which I have tested can be used.

Add in HTML

<Type= "Text/javascript" src= "jquery.min.js"></script><  Type= "Text/javascript" src= "jquery.zclip.js"></script>   

2. Writing code

Here is a small demo, mostly copying a link in a text box to the Clipboard.

<Type= "text" value= "www.baidu.com" id= "link"><id= "copybtn "> Copy link </span>            

Then add the script, very simple.

 <script>< Span style= "COLOR: #000000" > $ ( '  #copyBtn " ). Zclip ({path:  " zeroclipboard.swf ", copy : function () {return $ ( '  #link 　　　 　　 "). Val (); } }); </script>   

The path here is your flash, and copy is the callback function after the copy succeeds. Returns the value in the text box.

In addition we have to set the Jquery.zclip.js, with the editor to open it, right in front, you will see the following code:

var settings = $.extend ({                path: ' zeroclipboard.swf ',                null,                null null True truetrue }, params);         

Also modify path for your flash--zeroclipboard.swf, other settings we don't care about him first.

Well, test it right away, but here's to note that local testing is not successful, you need to use Tomcat or Apache to set up a server on this machine, and then put the files in the server directory to test. You'll see a small hand appear on the copy link, and a flash menu:

Then click on it and the success prompt box appears. You can try pasting in other places to see if there is a copy success.

Of course, you can also modify the prompt box after the copy succeeds, or add more features.

Find the following code in the.

Clip.addeventlistener (' Complete ',function (client, text) {if ($.isfunction (settings.aftercopy)) {O.trigger (' ZC                        Lip_aftercopy ' else {if (text.length > 500) {text = Text.substr (0, +) + "... \ n (" + (text.length-500) + "characters not shown) " text);} if (settings.clickafter) {o.trigger (' click ' 

Change the code of the alert that place, and maybe there are other places that can be modified, I did not look closely.

3. Other

We open our demo with chrome and open the console to see

Yes, this is exactly what the plugin has inserted into our page, and we can see that it just covers our copy link button.

Well, the ability to copy to the Clipboard using plug-in Zclip is covered here. For more details, please visit: http://www.steamdev.com/zclip/

The use of plug-ins is described in detail, as well as the settings of the relevant parameters, including the function after the successful copy, how to add a style to the "Copy link" button and so on.

Reference: http://www.steamdev.com/zclip/

JS Plugin zclip implement copy to clipboard function