Using Zeroclipboard to troubleshoot cross-browser copying to the Clipboard _ Web page Editor

The realization principle of Zero clipboard

Zero Clipboard use transparent flash to let it float on top of the Copy button, so that the click is not a button but flash, so that the required content into the flash, and then through the Flash copy function to copy the incoming content to the Clipboard

Installation method of Zero clipboard

First need to download Zero Clipboard compression package, unpack the folder after two files: Zeroclipboard.js and zeroclipboard.swf into your project.

Then put in the page that you want to use the copy function to introduce zero clipboard js file: Zeroclipboard.js
The following code:

Copy Code code as follows:

<script type= "Text/javascript" src= "Zeroclipboard.js" ></script>

Note: The above zeroclipboard.js, zeroclipboard.swf need to be placed under the same path. If you are not on the same path, use Zeroclipboard.setmoviepath ("flash path"); To set the zeroclipboard.swf address

Copy Code code as follows:

Zero Clipboard enables simple Cross-browser replication
var clip = new Zeroclipboard.client (); Create a new object
Clip.sethandcursor (TRUE); Set Mouse to hand type
Clip.settext ("haha"); Sets the text to copy.
Registers a button with the parameter ID. Clicking on this button will copy it.
This button does not necessarily require an input button, or it can be another DOM element.
Clip.glue ("Copy-botton"); And the previous position is not interchangeable

In this way, the basic skills can be achieved, click the button can copy the set of text. You may notice that the text to be copied is fixed, and what to do if you want to change dynamically, such as copying the contents of an input box. Don't worry, I'll talk about it here.

Advanced Features of Zero clipboard

1, reposition () method

Because the button is floating on a flash button, so when the page size changes, the flash button may be misplaced, so that is not the point. It doesn't matter, Zero Clipboard provides a reposition () method that recalculates the position of the Flash button. We can bind it to the Resize event. The following code is the Resize event reset button position implemented under jquery:

Copy Code code as follows:

$ (window). Resize (function () {
Clip.reposition ();
});

2. Hide () and show () method
These two methods can hide and display the Flash button. where the show () method invokes the reposition () method.

3, Setcsseffects () method
When the mouse moved to the button or click, because there is a Flash button occlusion, so like css ": hover", ": Active" and other pseudo classes may be invalidated. Setcsseffects () method is to solve this problem. First we need to change the pseudo class to class, for example:

#copy-botton:hover{border-color: #FF6633;} Can be changed to the following ": hover" into ". Hover"
#copy-botton.hover{border-color: #FF6633;}

We can call Clip.setcsseffects (true); So zero Clipboard will automatically handle for us: the class. Hover as pseudo class: hover.

4, gethtml () method
If you want to own instance a Flash, do not use Zero Clipboard attachment method, then this method can help busy. It accepts two parameters, respectively, for the width and height of the Flash. Returns the corresponding HTML code for the Flash. For example:

var html = clip.gethtml (150, 20);
You can use InnerHTML or direct document.write (); For output.
The following is an assembly-ready HTML code for the test output:
<embed id= "Zeroclipboardmovie_1" src= "zeroclipboard/zeroclipboard.swf" loop= "false" menu= "false" quality= "best" Bgcolor= "#ffffff" width= "height=" name= "zeroclipboardmovie_1" align= "Middle" allowscriptaccess= "always" Allowfullscreen= "false" Type= "Application/x-shockwave-flash" pluginspage= "http://www.macromedia.com/go/" Getflashplayer "flashvars=" id=1&width=150&height=20 "wmode=" Transparent "/>"

There is a bug on IE's Flash JavaScript communication interface. You must insert an OBJECT tag into an existing DOM element. And make sure that the element has been appendchild into the DOM before writing to InnerHTML.

Zero Clipboard Event Handling

Zero Clipboard provides a number of events that you can customize to handle these events. The zero Clipboard event handler function is AddEventListener (); For example, when Flash is fully loaded, an event "load" is triggered.
Clip.addeventlistener ("Load", function (client) {
Alert ("Flash loading complete!") ");
});
Zero Clipboard will pass the clip object as a parameter. The "client" in the example above.
and "Load" can also be written as "OnLoad", other events can also be so.

Other events also include:

MouseOver Mouse over events
Mouseout Mouse Out Event
MouseDown Mouse Down Event
MouseUp Mouse Release Event
Complete Replication Success Events
Among them MouseOver event and complete event are more commonly used.

As I said earlier, if you need to dynamically change what you're copying, the MouseOver event can be useful. For example, to dynamically copy a value in an input box with the ID test, we can reset the value when the mouse is over.

Copy Code code as follows:

Clip.addeventlistener ("MouseOver", function (client) {
var test = document.getElementById ("test");
Client.settext (Test.value); Reset the values you want to copy
});
Replication success:
Clip.addeventlistener ("Complete", function () {
Alert ("Copy succeeded!") ");
});