"Go" JS plugin zclip implementation 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

<script type= "Text/javascript" src= "jquery.min.js" ></script><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.

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

Then add the script, very simple.

<script>        $ (' #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 ',                copy:null,                beforecopy:null,                aftercopy:null ,                clickafter:true,                sethandcursor:true,                setcsseffects:true            }, 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 (' zclip_aftercopy ');                        } else {                            if (Text.length >) {                                text = text.substr (0, +) + "... \ n (" + (text.length-500) + "characters no T shown) ";                            }                            O.removeclass (' hover ');                            Alert ("Copied text to clipboard:\n\n" + 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.

Usage

1.) Add JQuery and Zclip to your document.

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

2.) Inside of a <script> block, attach zclip to the element which would become your "copy button".

$ (document). Ready (function () {    $ (' a#copy-description '). Zclip ({        path: ' js/zeroclipboard.swf ',        copy:$ ( ' P#description '). Text ()    });    The link with id "copy-description" would copy    //The text of the paragraph with id "description"    $ (' A#copy-dyna Mic '). Zclip ({        path: ' js/zeroclipboard.swf ',        copy:function () {return $ (' Input#dynamic '). val ();}    );    The link with id "copy-dynamic" would copy the current value    //of a dynamically changing input with the ID "Dynami C "});

3.) Supply custom callback functions.

$ (document). Ready (function () {    $ ("A#copy-callbacks"). Zclip ({        path: ' js/zeroclipboard.swf ',        copy:$ (' # Callback-paragraph '). Text (),        beforecopy:function () {            $ (' #callback-paragraph '). CSS (' background ', ' yellow ' );            $ (this). CSS (' color ', ' orange ');        },        aftercopy:function () {            $ (' #callback-paragraph '). CSS (' background ', ' Green ');            $ (this). CSS (' color ', ' purple ');            $ (this). Next ('. Check '). Show ();        }    );});

4.) Parameters & Defaults

Settings
Variable	Default Value	Available Values
Path *	"Zeroclipboard.swf"	"Path/to/zeroclipboard.swf"
Copy *	Null	Any string, or any JavaScript expression or function that returns a string
Aftercopy	Null	Specify a function to call after the text is copied. (Your aftercopy function would overwrite the default alert box.)
Beforecopy	Null	Specify a function to call before the text is copied.
Clickafter	True	True False
Sethandcursor	True	True False
Setcsseffects	True	True False
* Required

Notes

1.) tested compatible in IE 6, ie 7, ie 8, FF 3.6, Chrome 8, Safari 5, Opera 11

2.) for proper CSS effects:

/* Zclip is a flash overlay, so it must provide *//* the target element with "hover" and "active" classes *//* to simulate Native:hover and:active states. *//* Be sure to write your CSS as follows for best results: */a:hover, a.hover {...} A:active, a.active {...}

3.) Show/hide/remove Zclip

$ (' a.copy '). Zclip (' show '); Enable Zclip on the selected element$ (' a.copy '). Zclip (' hide '); Hide Zclip on the selected element$ (' a.copy '). Zclip (' remove '); Remove Zclip from the selected element

4.) For best results, attach zclip to your elements once the page have its final layout. There is a function this automatically repositions each Flash overlay on window load and resize, but it could not be 100% re liable in every instance.

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