Several examples of JQ plug-in zclip copied to the Clipboard

Copy to the Clipboard function, when we share the Web site, invite friends to use, and for IE browser we have a good solution, but with the Chrome browser more and more people, we need to write compatible with the big browser code, now introduce a jquery plug-in zclip, Specifically used to handle replication functionality, the usage is simple.

Html:

<script src= "Js/jquery.min.js" type= "Text/javascript" charset= "Utf-8" ></script>
<script src= "Js/jquery.zclip.min.js" type= "Text/javascript" charset= "Utf-8" ></script> <input "type=" Text "value=" www.111cn.net "id=" link "> <span id=" copybtn "> Copy link </span>
Js:

$ (' #copyBtn '). Zclip ({
Path: "Js/zeroclipboard.swf",
Copy:function () {
return $ (' #link '). Val ();
}
});

let's look at a complete example.

First you need to load the jquery library and the Zclip plugin in the page, these two files have been packed, welcome to click on the download button to download.

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

We then add the following code to the body section of the page:

<textarea id= "MyText" > Please enter the content </textarea><br/>
<a href= "#" id= "Copy_input" class= "copy" > Copy content </a>

The page is placed with an input box textarea, of course, it can be other HTML elements, then a copy button, can also be linked text form.
Javascript

When you click on "Copy Content", call the Zclip plug-in, and prompt replication success, see Code:

$ (function () {
$ (' #copy_input '). Zclip ({
Path: ' js/zeroclipboard.swf ',
Copy:function () {//copy content
return $ (' #mytext '). Val ();
},
Aftercopy:function () {//Replication succeeded
$ ("<span id= ' msg '/>"). InsertAfter ($ (' #copy_input ')). Text (' copy success ');
}
});
});
It is worth noting that if the content is copied from input box inputs, textarea, and so on, the Copy object uses:

Copy:function () {
return $ (' #mytext '). Val ();
}

If the content is copied from the page element Div, p, and so on, the Copy object uses:

Copy: $ (' #mytext '). Text ();

This completes the ability to copy content to the Clipboard.
Parameter Description
path:swf The call path, must, as js/zeroclipboard.swf,zeroclipboard.swf file already exists in the download package.
Copy: Copied content, must, any string, or what the callback function returns
Beforecopy: callback function before copying content, optional
Aftercopy: callback function after copying content, optional
You can also go to Zclip website for more information: http://steamdev.com/zclip/