JavaScript implements copy function

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:

[javascript]

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();

                                                                                                                                                                                              B //txtObj.Select ();

//document.execcommand 18); // Only IE supports, firefox reports grammatical errors, chrome execution results return false (not support)

// 3 The current copy is implemented through the textRange object: you don't need to select the content first

txtObj.createtextRange (). Execocommand ("Copy"); .getElementById(txtid);

if(window.clipboardData){ // Only IE supports this object, firefox and chrome do not support it

//1. Copy through 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. Realize current copy through TextRange object : You don’t need to select the content first

txtObj.createTextRange().execCommand("Copy");

}

}

2. Firefox, implemented through the interface method, Firefox is for security reasons, in 17 Later versions will close this interface, and it will be available in versions 17 and earlier. The code is as follows:

[javascript]

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

var clip = Components.classes ['@mozilla.org/widget/clipboard;1'].createInstance(Components.interface.nsIClipboard); 3. Chrome does not provide users with clipboard operations due to 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 is used to shield the shortcomings of JavaScript and solve the problem of copy compatibility between browsers.

The implementation principle of Zero Clipboard: Zero Clipboard first generates a Flash object label, allowing the transparent Flash to float on 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 Copy to system clipboard via Flash.

How to use Zero Clipboard

Note: Because 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. , the button is similar to the phenomenon of suspended animation. It is said on the Internet that right-clicking Flash settings will add ZeroClipboard.swf to a trusted location. It seems that it should 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 , the following code: ;

Note: ZeroClipboard.js and ZeroClipboard.swf need to be placed in the same path. If If they are not in the same path, you can use ZeroClipboard.setMoviePath() to set it.

3>Simple copy the code as follows:

[javascript]

var clip = new ZeroClipboard.Client(); // Create a new clip object

clip.setHandCursor( true ); // Settings The mouse is a hand type

clip.setText("hello,world");                                                               use using using ’                       ’ s ’ s ’ s ’     ‐ ‐ ‐ ‐ ‐ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​Button, the parameter is the id of the button element, you can copy it by clicking the button

var clip = new ZeroClipboard.Client(); //Create a new clip object

clip.setHandCursor(true); The copied 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 Commonly used methods, it is recommended to view the source code directly:

reposition(): to prevent the Flash button from being misaligned when the page size changes

hide(): hide the Flash button

show(): display Flash button

setCSSEffects(): Solve the problem of Flash occlusion button style failure (change :hover to .hover).

5>Zero Clipboard common events, the event handler function is addEventListener():

load: Flash button loading event

mouseOver: mouse move up event

mouseOut: mouse move out event

mouseDown : mouse Press event

mouseUp: mouse release event

complete: copy success event

jquery.zclip library

Since ZeroClipboard is based on native JavaScript, jquery.zclip uses jQuery to implement Zero Clip board For encapsulation, if jQuery is already used in the project, it is recommended to use it, jquery.zclip is smaller in size.