Actual test on browser support for JavaScript copy function_javascript skills

When I was working on the Web front-end these two days, I encountered a need to implement text copying through js.
Ignore the compatibility of the browser and look at the support of each browser for the copy function:

1. IE browser, there are three solutions, the code is as follows:

Copy code The 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 support it
//1. Copy through the clipboardData object
//window.clipboardData.clearData();
//window.clipboardData.setData("Text",txtObj.value);

//2. Copy through the document object: first select the Chinese text, and then execute the copy command
//txtObj .select();
//document.execCommand("Copy"); // Only supported by IE, Firefox reports a syntax error, and the chrome execution result returns false (not supported)

//3. Pass TextRange object realizes instant copy: you don’t need to select the content first
txtObj.createTextRange().execCommand("Copy");
}
}

2. Firefox, through the interface Method implementation. For security reasons, Firefox closes this interface in versions after version 17. It is available in versions 17 and earlier. The code is as follows:

Copy code The 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 reasons. It can be seen that the support for the copy function is not uniform across browsers.
Zero Clipboard Library
Zero Clipboard js library written by jhuckaby, which uses Flash to copy content to the clipboard. As long as the browser is equipped with the Flash plug-in, the content can be copied. ActionScript blocks the shortcomings of JavaScript and solves the problem of copy compatibility between browsers.
The implementation principle of Zero Clipboard: Zero Clipboard first generates a Flash object tag, letting the transparent Flash float above the copy button. In fact, what is clicked is not the button but the Flash. In this way, the required content is transferred to Flash, and then passed through the Flash Copy to system clipboard.
How to use Zero Clipboard
Note: Since it is based on Flash implementation, Flash needs to be run in a Web container (such as Apache, Tomcat) for security reasons. Opening Flash directly will not be loaded, and the button will resemble suspended animation. Phenomenon, the Internet said that right-clicking Flash settings and adding ZeroClipboard.swf to a trusted location seems to work. I tried it, but it still doesn't work. It may also be a problem with my local browser.
1> Download the compressed package of Zero Clipboard, unzip it and put the two files in the folder: ZeroClipboard.js and ZeroClipboard.swf into your project;
2> Introduce the Zero Clipboard.js file, as follows Code: ;
Note: ZeroClipboard.js and ZeroClipboard.swf need to be placed in the same path, if they are not in the same path , can be set using ZeroClipboard.setMoviePath().
3> Simply copy the code as follows:

Copy the code The code is as follows:

var clip = new ZeroClipboard.Client(); // Create a new clip object
clip.setHandCursor( true ); // Set the mouse to hand type
clip.setText("hello,world"); // Set to copy The text 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

4> Zero Clipboard common methods, it is recommended to view the source code directly:
reposition(): Prevent the Flash button from being misaligned when the page size changes
hide(): Hide the Flash button
show (): Display the Flash button
setCSSEffects(): Solve the problem of invalid Flash shield button style (change :hover to .hover).
5>Zero Clipboard common events, the event processing function is addEventListener():
load: Flash button loading event
mouseOver: mouse move up event
mouseOut: mouse move out event
mouseDown: Mouse down event
mouseUp: mouse release event
complete: copy success event

jquery.zclip library
Since ZeroClipboard is based on native JavaScript implementation, jquery.zclip uses jQuery to implement Zero Clipboard For encapsulation, if jQuery is already used in the project, it is recommended to use it, jquery.zclip is smaller in size.
jquery.zclip download address: http://www.steamdev.com/zclip/
Zero Clipboard download address: https://github.com/zeroclipboard/ZeroClipboard/releases
Sample download:
In order to facilitate testing, I uploaded the examples written by jquery.zclip and Zero Clipboard to csdn. The examples must be run in the web container.
demo download address