About replication in JavaScript

There is a need to copy content to the Clipboard when doing the project, because there are many browsers, so it is important to be compatible

1, the simplest copy, can only be used under IE

Using the Clipboarddata method

<script language= "javascript" >    function Copy () {        window.clipboardData.setData ("text", document.getElementById ("name"). value);        Alert ("The text is in the Clipboard, try to paste it!");    

2, cross-browser, but Firefox cannot copy

After the test, Firefox access failed
3, the Universal flash
Do not make the wheel again, there is a widely used class library Zeroclipboard
the implementation principle of Zero Clipboard
The Zero Clipboard uses Flash for replication, prior to the Clipboard copy solution, which exploits a hidden flash. However, the latest Flash Player 10 only allows operation on Flash to start the Clipboard. So the Zero Clipboard to improve this, with a transparent flash, let it float on the button above, so in fact, the click is not the button but flash, you can use the copy function of Flash.

 
 

  
  
 
   
Create a transparent Flash
 
   
Float this flash on the top of the button
 
   
Determine what text to copy
 
   
Listen to this transparent Flash mouse click event
 
   
After the flash is clicked, complete the Clipboard processing
 
  
 
 
For these things, Zeroclipboard provides different APIs to complete the requirements.

How to use Zero Clipboard
Complete code Download directly
git clone https://github.com/chenpingzhao/easycopy.git
About Zeroclipboard
var Zeroclipboard = {version: "1.0.7", clients: {}, Moviepath: "zeroclipboard.swf", nextid:1, $: function (a) {if (typeof (a) = = "string") {A = document.getElementById (A)} if (!            A.addclass) {a.hide = function () {This.style.display = "none"};            A.show = function () {This.style.display = ""};                A.addclass = function (b) {this.removeclass (b);            This.classname + = "" + B};                A.removeclass = function (D) {var E = This.className.split (/\s+/);                var B =-1; for (var C = 0; C < E.length;                        C + +) {if (e[c] = = D) {B = C;                    C = E.length}} if (b >-1) {E.splice (b, 1);        This.classname = E.join ("")}        return this}; A.hasclass = function (B) {return!! This.className.match (New RegExp ("\\s*" + B + "\\s*")}} return A}, Setmoviepath:functio        N (A) {This.moviepath = A}, Dispatch:function (D, B, C) {var A = this.clients[d];    if (a) {a.receiveevent (b, C)}}, Register:function (b, a) {this.clients[b] = A},  Getdomobjectposition:function (C, A) {var B = {left:0, top:0, width:c.width? C.width:c.offsetwidth, Height:c.height?        C.height:c.offsetheight};            while (c && (c! = A)) {b.left + = C.offsetleft;            B.top + = C.offsettop;        C = c.offsetparent} return B}, Client:function (A) {this.handlers = {};        This.id = zeroclipboard.nextid++;        This.movieid = "Zeroclipboardmovie_" + this.id; ZeroclipboarD.register (this.id, this); if (a) {This.glue (A)}}};     ZeroClipboard.Client.prototype = {id:0, ready:false, Movie:null, ClipText: "", Handcursorenabled:true, Csseffects:true, Handlers:null,//We can use the following API to overlap Flash and buttons, and float above the button glue:function (D, B, E) {THIS.D        Omelement = zeroclipboard.$ (D);        var F = 99; if (this.domElement.style.zIndex) {F = parseint (This.domElement.style.zIndex, ten) + 1} if (type                of (b) = = "string") {b = zeroclipboard.$ (b)} else {if (typeof (b) = = "undefined") { B = document.getElementsByTagName ("body") [0]}} var C = Zeroclipboard.getdomobjectpositio        N (this.domelement, B);        This.div = document.createelement ("div");        var A = This.div.style;        A.position = "absolute";        A.left = "" + c.left + "px";        A.top = "" + c.top + "px";        A.width = "" + c.width + "px";A.height = "" + c.height + "px";        A.zindex = F;        if (typeof (e) = = "Object") {for (Addedstyle in E) {A[addedstyle] = E[addedstyle]}        } b.appendchild (This.div);    This.div.innerHTML = this.gethtml (C.width, C.height)},/*ie has a bug on the Flash JavaScript communication interface. You must insert an OBJECT tag into an existing DOM element.        And before writing InnerHTML, make sure that the element has been inserted into the DOM by AppendChild method */Gethtml:function (D, A) {var C = "";        var B = "Id=" + this.id + "&width=" + D + "&height=" + A; if (Navigator.userAgent.match (/msie/)) {var E = Location.href.match (/^https/i)?            "https://": "/http"; C + = ' <object classid= "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase= "' + E + ' download.macromedia.com/pub/ shockwave/cabs/flash/swflash.cab#version=9,0,0,0 "width=" ' + D + ' "height=" ' + A + ' "id=" ' + This.movieid + ' "align=" mi Ddle "><param name=" allowscriptaccess "value=" Always "/><param name=" AlloWfullscreen "value=" false "/><param name=" movie "value=" ' + Zeroclipboard.moviepath + ' "/><param name=" loop "Value=" false "/><param name=" menu "value=" false "/><param name=" quality "value=" best "/><param name = "bgcolor" value= "#ffffff"/><param name= "flashvars" value= "' + B + '"/><param name= "wmode" value= " Transparent "/></object> '} else {C + = ' <embed id=" ' + This.movieid + ' "src=" ' + ZEROCLIPBO  Ard.moviepath + ' "loop=" false "menu=" false "quality=" Best "bgcolor=" #ffffff "width=" ' + D + ' "height=" ' + A + ' "name=" ' + This.movieid + ' "align=" middle "allowscriptaccess=" Always "allowfullscreen=" false "Type=" application/ X-shockwave-flash "pluginspage=" http://www.macromedia.com/go/getflashplayer "flashvars=" ' + B + ' "wmode=" Transparent "/> '} return C}, Hide:function () {if (this.div) {this.div.style.left ="-20 00px "}}, Show:function () {this.repositIon ()}, Destroy:function () {if (this.domelement && this.div) {this.hide ();            This.div.innerHTML = "";            var A = document.getElementsByTagName ("body") [0];            try {a.removechild (this.div)} catch (B) {} this.domelement = null; This.div = null}},/* because there is a flash button floating on the button, so when the page size changes, the Flash button may be misaligned, the point is zero Clipboard provides a reposit The ion () method allows you to recalculate the position of the Flash button.         We can bind it to the Resize event on bind (window, "Resize", function () {clip.reposition ();});            function bind (obj, type, fn) {if (obj.attachevent) {obj[' E ' + type + fn] = fn;            Obj[type + fn] = function () {obj[' E ' + type + fn] (window.event);        } obj.attachevent (' On ' + type, Obj[type + fn]);    } else Obj.addeventlistener (type, FN, false); }*/Reposition:function (c) {if (c) {this.domelement = zeroclipboard.$ (c);             if (!this.domelement) {this.hide ()}} if (This.domelement && this.div) {            var B = zeroclipboard.getdomobjectposition (this.domelement);            var A = This.div.style;            A.left = "" + b.left + "px";        A.top = "" + b.top + "px"}}, Settext:function (a) {this.cliptext = A; if (This.ready) {This.movie.setText (A)}}, Addeventlistener:function (A, B) {a = A.tostr        ING (). toLowerCase (). Replace (/^on/, "");  if (!this.handlers[a]) {this.handlers[a] = []} this.handlers[a].push (B)}, Sethandcursor:        function (a) {this.handcursorenabled = A;  if (This.ready) {this.movie.setHandCursor (A)}},/* Mouse over button or click, because of the Flash button occlusion, so like css ": hover",    Pseudo-classes such as ": Active" may be invalidated. The Setcsseffects () method is to solve this problem.    First we need to change the pseudo class to class Copy-botton:hover {border-color: #FF6633; } can be changed toThe following ": hover" changed to ". Hover" Copy-botton.hover {border-color: #FF6633; We can call Clip.setcsseffects (true); So the Zero Clipboard will automatically handle for us: class. Hover as Pseudo-class: hover*/setcsseffects:function (A) {this.csseffects =!!    A},/*zero Clipboard provides a number of events that you can customize to handle these events. The Zero Clipboard event handler function is AddEventListener (); For example, when Flash is fully loaded it triggers an event "load" Clip.addeventlistener ("Load", function (client) {alert ("Flash loaded!").     ");        }); */Receiveevent:function (d, E) {d = d.tostring (). toLowerCase (). Replace (/^on/, "");                Switch (D) {case "load": This.movie = document.getElementById (This.movieid);                    if (!this.movie) {var C = this;                    SetTimeout (function () {c.receiveevent ("load", NULL)}, 1); return} if (!this.ready && navigator.userAgent.match (/firefox/) && Navigato R.useRagent.match (/windows/)) {var C = this;                    SetTimeout (function () {c.receiveevent ("load", NULL)}, 100);                    This.ready = true;                return} This.ready = true;                This.movie.setText (This.cliptext);                This.movie.setHandCursor (this.handcursorenabled);            Break Case "MouseOver": if (this.domelement && this.csseffects) {This.domElement.addC                    Lass ("hover");                if (this.recoveractive) {This.domElement.addClass ("Active")}}            Break Case "Mouseout": if (this.domelement && this.csseffects) {this.recoveractive =                    False if (This.domElement.hasClass ("active")) {This.domElement.removeClass ("aCtive ");                This.recoveractive = true} this.domElement.removeClass ("Hover")}            Break Case "MouseDown": if (this.domelement && this.csseffects) {This.domElement.addC            Lass ("Active")} break; Case "MouseUp": if (this.domelement && this.csseffects) {This.domElement.remove                    Class ("active"); This.recoveractive = false} break} if (This.handlers[d]) {for (V Ar B = 0, A = this.handlers[d].length; B < A;                b++) {var F = this.handlers[d][b]; if (typeof (f) = = "function") {F (this, E)} else {if ((typeof (f) = = "Object") && (f.length = = 2)) {F[0][f[1]] (this, E)} else {                       if (typeof (F) = = "string") {Window[f] (this, E)} }                }            }        }    }};
　　
Reference articles
Http://www.jb51.net/article/22403.htm
Http://www.cnblogs.com/yangjunhua/archive/2012/09/10/2678817.html
http://jiongks.name/blog/zeroclipboard-intro/
About replication in JavaScript