JavaScript replication instance detailed _javascript tips

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

1, the simplest copy, only in IE under the use of

Using the Clipboarddata method

<script type= "Text/javascript" >
function Copy () {
window.clipboardData.setData ("text") document.getElementById ("name"). value);
Alert ("The text is on the Clipboard and try to paste it!");
}

2, Cross-browser, but Firefox can not copy

After testing, Firefox access failed

3, the Universal flash

Don't reinvent the wheel, there's a broad class library Zeroclipboard

The realization principle of Zero Clipboard

Zero Clipboard uses Flash for replication, preceded by a Clipboard copy solution, which utilizes a hidden flash. But the latest Flash Player 10 only allows operations on flash to start the Clipboard. So Zero Clipboard has improved on this, using a transparent flash, let it float on the button, so in fact, click not the button but flash, you can use flash copy function.

Create a transparent Flash

Float this flash on top of the button

Determine what text is to be copied

Monitor the mouse click event for this transparent flash

After the flash is clicked, finish the Clipboard processing

For these things, Zeroclipboard provides different APIs to complete the entire requirement.

How to use Zero Clipboard

git clone https://github.com/chenpingzhao/easycopy.git

About Zeroclipboard.js

var Zeroclipboard = {version: "1.0.7", clients: {}, Moviepath: "zeroclipboard.swf", nextid:1, $: function (A) {if (type Of (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:function (a) {This.moviepath = A}, di Spatch:function (D, B, C) {var A = this.clients[d]; if (a) {a.receiveevent (b, C)}}, Register:function (b, A) {this.cl IENTS[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:tr UE, Handlers:null,//We can overlap the flash and buttons by following this API and float over the button glue:function (d, B, E) {this.domelement = zeroclipboard.$ (d); VA
R F = 99; if (this.domElement.style.zIndex) {F = parseint (This.domElement.style.zIndex,) + 1} if (typeof (b) = = "string") {B = zeroclipboard.$ (b)} else {if (typeof (b) = = "undefined") {B = document.getElementsByTagName ("body") [0]}} var C = Zeroc
Lipboard.getdomobjectposition (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)}, there is a bug on the Flash JavaScript communication interface of/*ie. You must insert an OBJECT tag into an existing DOM element.
And make sure that the element has been appendchild into the DOM before writing to InnerHTML/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 NA Me= "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=" ' + Zeroclipboard.moviepath + ' "loop=" false "menu=" false "quality=" best " Bgcolor= "#ffffff" width= "' + D + '" height= "' + A + '" name= "' + This.movieid + '" align= "Middle" allowscriptaccess= "alway S "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 = " -2000px"}}, 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 misplaced, the point is zero Clipboard provides a reposition () method, you can recalculate F The position of the lash button. 
We can bind it to the Resize event 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 ' + t
Ype + 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 (t His.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.tostring (). toLowerCase (). Replace (/^on/, ""); if (!this.handlers[a]) {this.handlers[a] = []} this.handlers[a].push (B)}, Sethandcursor:function (A) {This.handcursore
nabled = A;
if (This.ready) {this.movie.setHandCursor (A)}},/* Mouse moved to the button or click, because there is a Flash button occlusion, so like css ": hover", ": Active" and other pseudo classes may be invalidated. 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 to the following ": hover" into ". Hover"

Copy-botton.hover {
border-color: #FF6633;
}

We can call Clip.setcsseffects (true); So zero Clipboard will automatically handle for us: the 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, an event "load" Clip.addeventlistener ("load") is triggered, function (client) {alert ("Flash loading is complete!"). 
");
}/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/) && Navigator.userAgent.match (/ windows/)) {var C = this; settimeout (function () {c.receiveevent ("load", NULL)}, and 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.addClass ("hover"); if ( this.recoveractive) {this.domElement.addClass ("active ")}} break; Case "Mouseout": if (this.domelement && this.csseffects) {this.recoveractive = false; if (This.domElement.hasCla SS ("active")) {This.domElement.removeClass ("active"); this.recoveractive = true} this.domElement.removeClass ("hover
")} break;
Case ' MouseDown ': if (this.domelement && this.csseffects) {this.domElement.addClass ("active")} break;
Case "MouseUp": if (this.domelement && this.csseffects) {this.domElement.removeClass ("active"); This.recoveractive = false} break} if (This.handlers[d]) {for (var 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") &AMP;&A mp (F.length = 2))  {F[0][f[1]] (this, e)} else {if (typeof (F) = = "string") {Window[f] (this, E)}}}}};

The above is a small part of the description of the JavaScript copy of the example detailed, I hope to help you.