In the past two days, when we were working on the Web Front-end, we had to use JavaScript to implement text replication.
First, let's look at the support of various browsers for the replication function without considering the browser compatibility:
1. There are three solutions for IE browser:
Copy codeThe Code is as follows:
Function copy (txtid ){
Var txtObj = document. getElementById (txtid );
If (window. clipboardData) {// only IE supports this object. firefox and chrome do not.
// 1. Implement Replication through the clipboardData object
// Window. clipboardData. clearData ();
// Window. clipboardData. setData ("Text", txtObj. value );
// 2. Copy by using the document Object: select the moderate text before executing the Copy command.
// TxtObj. select ();
// Document.exe cCommand ("Copy"); // only supported by IE, syntax error reported by Firefox, false returned by chrome execution result (not supported)
// 3. Use the TextRange object to copy the file: you do not need to select the content first.
Txtobj.createtextrange(cmd.exe cCommand ("Copy ");
}
}
2. Firefox is implemented through the interface. Firefox disables this interface after Version 17 for security reasons and is available in Version 17 and earlier versions. The Code is as follows:
Copy codeThe Code is as follows:
Var clip = Components. classes ['@ mozilla.org/widget/clipboard=1').createinstance (Components. interface. nsIClipboard );
3. Chrome does not provide users with clipboard operations for security purposes. It can be seen that various browsers do not support the replication function in a uniform way.
Zero Clipboard Library
The js class library of Zero Clipboard written by jhuckaby uses Flash to copy the content to the Clipboard. As long as the browser is installed with the Flash plug-in, the content can be copied. The limitations of JavaScript are shielded by using ActionScript to solve the compatibility problem of cross-browser replication.
Implementation principle of Zero Clipboard: Zero Clipboard first generates the Flash Object Tag, so that transparent Flash floats on the copy button. In fact, the click is not a button but Flash, so that the required content is transmitted to Flash, then copy to the system Clipboard through Flash.
How to use Zero Clipboard
Note: It may be okay to add the role to a trusted location. I tried it, but it still does not work, or it may be a problem with my local browser.
1> download the compressed Zero Clipboard package, decompress the package, and put the files zeroclipboard.jsand zeroclipboard.swf in the folder into your project;
2> introduce the Zero Clipboard. js file with the following code: <script type = "text/javascript" src = "ZeroClipboard. js"> </script>;
Note: zeroclipboard.jsand zeroclipboard.swf must be placed in the same path. If they are not in the same path, use ZeroClipboard. setMoviePath () to set them.
3> the simple copy code is as follows:
Copy codeThe Code is as follows:
Var clip = new ZeroClipboard. Client (); // create a clip object
Clip. setHandCursor (true); // set the mouse to the Hand Type
Clip. setText ("hello, world"); // set the text to be copied, which can be the value of the text box.
Clip. glue ("copy-botton"); // register a button for clip. The parameter is the id of the button element. click the button to copy it.
4> common methods of Zero Clipboard. You are advised to view the source code directly:
Reposition (): prevents the Flash button from being misplaced when the page size changes.
Hide (): hide the Flash button
Show (): display the Flash button
SetCSSEffects (): solves the problem of Flash occlusion button style failure (Change: hover to. hover ).
5> Zero Clipboard common events. The event processing function is addEventListener ():
Load: the Flash button is loaded.
MouseOver: move the mouse over the event
MouseOut: Mouse removal event
MouseDown
MouseUp: Mouse release event
Complete: Successful copy event
Jquery. zclip Library
Since ZeroClipboard is implemented based on native JavaScript, jquery. zclip uses jQuery to encapsulate Zero Clipboard. If jQuery is already used in the project, it is recommended that jquery. zclip is small in size.
Jquery. zclip: http://www.steamdev.com/zclip/
Zero Clipboard: https://github.com/zeroclipboard/ZeroClipboard/releases
Download example:
To facilitate the test, I uploaded the examples written by jquery. zclip and Zero Clipboard to csdn. The examples must be run in the web container.
Demo