JavaScript implementation of the replication capabilities of the browser to support the test

These two days in the Web front-end, encountered the requirements through JS to achieve the function of text replication.
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:

Copy Code code as follows:


function Copy (txtid) {


var txtobj = document.getElementById (txtID);


if (window.clipboarddata) {//only IE supports this object, Firefox, Chrome does not support


//1, replication via Clipboarddata object


//window.clipboarddata.cleardata ();


//window.clipboarddata.setdata ("Text", Txtobj.value);





//2, through the Document object to achieve replication: first select the text, and then execute the copy command


//txtobj.select ();


//document.execcommand ("Copy"); Only IE support, Firefox report syntax error, chrome results return False (not supported)





//3, through the TextRange object to achieve the current replication: You can not select the content first


Txtobj.createtextrange (). ExecCommand ("Copy");


}


}

2, Firefox, through the interface method to achieve, Firefox is for security reasons, after 17 version of the release of this interface, 17 and previous versions available. The code is as follows:

Copy Code code as follows:


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

3, Chrome for security, did not provide users with the operation of the Clipboard. This shows that the browser's support for the replication function is not uniform.
Zero Clipboard Library
Jhuckaby Write zero Clipboard JS class library, the use of Flash to complete the copy content to the Clipboard. As long as the browser is equipped with a Flash plug-in can copy content, through ActionScript masking the lack of JavaScript, to resolve browser replication compatibility issues.
Zero Clipboard Implementation principle: Zero Clipboard first generated Flash Object tags, so that transparent flash floating in the Copy button, in fact, click not the button but flash, so that the content will need to be imported into the flash, Then copy to the system Clipboard via Flash.
How to use Zero Clipboard
Note: Because it is based on flash, Flash is safe and needs to be run in web containers (such as Apache, Tomcat), and direct flash will not be loaded, the button is similar to suspended animation, Online say right key 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 after the two files: Zeroclipboard.js and zeroclipboard.swf into your project;
2> introduces the zero clipboard.js file, 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:

Copy Code code as follows:


var clip = new Zeroclipboard.client (); Creates a new clip object


Clip.sethandcursor (TRUE); Set mouse to hand type


clip.settext ("Hello,world"); Set the text you want to copy,
the value of the text box

clip.glue ("Copy-botton"); Registers a button for the clip, the parameter is the button element's ID, the click button can realize the duplication

4>zero clipboard commonly used methods, it is recommended to view the source directly:
Reposition (): To prevent when the page size changes, the flash button may be misplaced problems
hide (): Hide Flash button
Show (): Display Flash button
setcsseffects (): Resolves the Flash occlusion button style expiration problem (will: hover modified to. Hover).
5>zero Clipboard frequently used events, the event handler function is AddEventListener ():
Load:flash button Finishes loading event
MouseOver: Mouse over events
Mouseout: Mouse move Event
MouseDown: Mouse Down event
MouseUp: Mouse Release Event
Complete: Replication Success Event

Jquery.zclip Library
Because Zeroclipboard is based on native Javas Cript implementation, Jquery.zclip uses jquery to encapsulate zero clipboard, and if jquery is already in use in the project, it is recommended to use, Jquery.zclip small.
Jquery.zclip Download Address: http://www.steamdev.com/zclip/
Zero Clipboard download Address: https://github.com/zeroclipboard/ Zeroclipboard/releases
Sample Downloads:
To facilitate testing, I upload the example of Jquery.zclip and zero clipboard to CSDN, which must be run in a Web container.