JavaScript implements replication functionality

These two days in the Web front-end, encountered the need to use JS to achieve text replication function. first, regardless of browser compatibility, look at the browser's support for replication features:1, IE browser, the solution has three kinds, the code is as follows: [JavaScript]View Plaincopy

2. function Copy (txtID) {
4. var txtobj = document.getElementById (txtID);
6. if (window.clipboarddata) { //IE only supports this object, Firefox, Chrome does not support
8. //1, replication via Clipboarddata object
10. //window.clipboarddata.cleardata ();
12. //window.clipboarddata.setdata ("Text", Txtobj.value);
16. ///2, copy by Document object: Select the text in, then execute the copy command
18. //txtobj.select ();
20. //document.execcommand ("Copy");//IE support only, Firefox report syntax error, chrome execution result return False (not supported)
24. ///3, through the TextRange object implementation of the current replication: You can not first select the content
26. Txtobj.createtextrange (). ExecCommand ("Copy");
28. }
30. }

2, Firefox, through the method of the interface, Firefox is for security reasons, after 17 version off this interface, 17 and previous versions are available. The code is as follows: [JavaScript]View Plaincopy

1. var clip = components.classes[' @mozilla. Org/widget/clipboard;1 '].createinstance (components.   Interface.nsiclipboard);

3. Chrome is safe and does not provide the user with the clipboard operation. This shows that the browser support for replication features is not uniform. Zero Clipboard LibraryJhuckaby Write zero Clipboard JS class library, using Flash to complete the copy content to the Clipboard. As long as the browser has a flash plugin to copy content, through ActionScript shielding the lack of JavaScript, to resolve the inter-browser replication compatibility issues. Zero Clipboard Implementation principle: zero Clipboard first generate Flash Object tags, let transparent flash floating on the Copy button above, in fact, click on the button instead of flash, so that the required content into flash, Then copy the flash to the system Clipboard.

How to use Zero Clipboard

Note: Because it is based on the flash implementation, Flash is safe, need to be in the Web container (such as Apache, Tomcat) to run, directly open flash will not be loaded, button similar to the phenomenon of suspended animation, Online said right-click Flash settings will add zeroclipboard.swf to the trusted location, the feeling should be line, I tried, still not, it may be my local browser problem.

1> Download Zero Clipboard compression package, unzip the folder in two files: Zeroclipboard.js and zeroclipboard.swf into your project;

2> introduces the zero Clipboard.js file with the following code: <script type= "Text/javascript" src= "Zeroclipboard.js" ></script>;

Note: Zeroclipboard.js and zeroclipboard.swf need to be placed under the same path, if not the same path, you can use Zeroclipboard.setmoviepath () to set.

3> Simple copy code is as follows:

[JavaScript]View Plaincopy

1. var clip = new Zeroclipboard.client (); //Create a new clip object
2. Clip.sethandcursor ( true); //Set mouse to hand type
3. Clip.settext ("Hello,world"); //Set the text you want to copy to the value of the text box
4. Clip.glue ("Copy-botton"); //Register a button for clip, the parameter is the ID of the button element, click the button to achieve replication

4>zero clipboard commonly used methods, it is recommended to view the source code directly:

Reposition (): Prevents the Flash button from being misaligned when the page size changes

Hide (): Hidden Flash button

Show (): Show Flash button

Setcsseffects (): Resolves the Flash occlusion button style invalidation issue (change: hover to. Hover).

5>zero Clipboard Common event, event handler function is AddEventListener ():

Load:flash Button Loading Event
MouseOver: Mouse over Event
MouseOut: Mouse Out Event
MouseDown: Mouse Down Event
MouseUp: Mouse Release Event
Complete: Replication Success Event

Jquery.zclip Library

Since Zeroclipboard is based on native JavaScript implementations, Jquery.zclip uses jquery to encapsulate the zero clipboard, and if jquery is already used in the project, it is recommended, and the Jquery.zclip volume is small.

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

Zero clipboard:https://github.com/zeroclipboard/zeroclipboard/releases

Sample Download:

To facilitate testing, I uploaded jquery.zclip and zero clipboard written examples to CSDN, and the example must be run in the Web container.

: http://download.csdn.net/detail/bbirdsky/5776583

Transferred from: http://blog.csdn.net/bbirdsky/article/details/9368169

JavaScript implements replication functionality