There is a requirement when working on a project, which is to copy content to the clipboard. Because there are many browsers, compatibility is important.
1. The simplest copy can only be used in IE
Using clipboardData method
<script type="text/javascript">
function copy(){
("text",("name").value);
alert("The text is on the clipboard, try to paste it!");
}
</script>
2. Cross-browser, but Firefox cannot be copied
<head>
<script type="text/javascript">
function CopyToClipboard () {
var input = ("toClipboard");
var textToClipboard = ;
var success = true;
if () { // Internet Explorer
("Text", textToClipboard);
}
else {
// create a temporary element for the execCommand method
var forExecElement = CreateElementForExecCommand (textToClipboard);
/* Select the contents of the element
(the execCommand for 'copy' method works on the selection) */
SelectContent (forExecElement);
var supported = true;
// UniversalXPConnect privilege is required for clipboard access in Firefox
try {
if ( && ) {
("UniversalXPConnect");
}
// Copy the selected content to the clipboard
// Works in Firefox and in Safari before version 5
success = ("copy", false, null);
}
catch (e) {
success = false;
}
// remove the temporary element
(forExecElement);
}
if (success) {
alert ("The text is on the clipboard, try to paste it!");
}
else {
alert ("Your browser doesn't allow clipboard access!");
}
}
function CreateElementForExecCommand (textToClipboard) {
var forExecElement = ("div");
// place outside the visible area
= "absolute";
= "-10000px";
= "-10000px";
// write the necessary text into the element and append to the document
= textToClipboard;
(forExecElement);
// the contentEditable mode is necessary for the execCommand method in Firefox
= true;
return forExecElement;
}
function SelectContent (element) {
// first create a range
var rangeToSelect = ();
(element);
// select the contents
var selection = ();
();
(rangeToSelect);
}
</script>
</head>
<body>
<input value="text to clipboard"/>
<button onclick='CopyToClipboard ()'>Copy text to clipboard</button>
</body>
Firefox access failed after testing
3. Universal flash
Don't repeat the wheel, there is a widely used class library ZeroClipboard
The implementation principle of Zero Clipboard
Zero Clipboard uses Flash for replication, and there was a Clipboard Copy solution that used a hidden Flash. But the latest Flash Player 10 allows only operations on Flash to start the clipboard. So Zero Clipboard has improved this by using a transparent Flash to let it float on the button. In fact, it is not the button that is clicked but Flash, so you can use the copy function of Flash.
Create a transparent flash
Float this flash on the button
Determine what text to copy
Listen to this transparent flash mouse click event
After the flash is clicked, the clipboard processing is completed
For these things, ZeroClipboard provides different APIs to complete the entire requirement
How to use Zero Clipboard
git clone /chenpingzhao/
about
var ZeroClipboard = {
version: "1.0.7",
clients: {},
moviePath: "",
nextId: 1,
$: function(A) {
if (typeof(A) == "string") {
A = (A)
}
if (!) {
= function() {
= "none"
};
= function() {
= ""
};
= function(B) {
(B);
+= " " + B
};
= function(D) {
var E = (/\s+/);
var B = -1;
for (var C = 0; C < ; C++) {
if (E[C] == D) {
B = C;
C =
}
}
if (B > -1) {
(B, 1);
= (" ")
}
return this
};
= function(B) {
return !!(new RegExp("\\s*" + B + "\\s*"))
}
}
return A
},
setMoviePath: function(A) {
= A
},
dispatch: function(D, B, C) {
var A = [D];
if (A) {
(B, C)
}
},
register: function(B, A) {
[B] = A
},
getDOMObjectPosition: function(C, A) {
var B = {
left: 0,
top: 0,
width: ? : ,
height: ? :
};
while (C && (C != A)) {
+= ;
+= ;
C =
}
return B
},
Client: function(A) {
= {};
= ++;
= "ZeroClipboardMovie_" + ;
(, this);
if (A) {
(A)
}
}
};
= {
id: 0,
ready: false,
movie: null,
clipText: "",
handCursorEnabled: true,
cssEffects: true,
handlers: null,
//We can use the following API to overlap the flash and button and float on the buttonglue: function(D, B, E) {
= ZeroClipboard.$(D);
var F = 99;
if () {
F = parseInt(, 10) + 1
}
if (typeof(B) == "string") {
B = ZeroClipboard.$(B)
} else {
if (typeof(B) == "undefined") {
B = ("body")[0]
}
}
var C = (, B);
= ("div");
var A = ;
= "absolute";
= "" + + "px";
= "" + + "px";
= "" + + "px";
= "" + + "px";
= F;
if (typeof(E) == "object") {
for (addedStyle in E) {
A[addedStyle] = E[addedStyle]
}
}
();
= (, )
},
/*IE has a bug on the Flash JavaScript communication interface.
You must insert an object tag into an existing DOM element. And before writing to innerHTML, make sure that the element has been inserted into the DOM by the appendChild method*/
getHTML: function(D, A) {
var C = "";
var B = "&width=" + D + "&height=" + A;
if ((/MSIE/)) {
var E = (/^https/i) ? "https://" : "http://";
C += '<object class codebase="' + E + '/pub/shockwave/cabs/flash/#version=9,0,0,0" width="' + D + '" height="' + A + '" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="' + + '" /><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 src="' + + '" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="' + D + '" height="' + A + '" name="' + + '" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="/go/getflashplayer" flashvars="' + B + '" wmode="transparent" />'
}
return C
},
hide: function() {
if () {
= "-2000px"
}
},
show: function() {
()
},
destroy: function() {
if ( && ) {
();
= "";
var A = ("body")[0];
try {
()
} catch (B) {}
= null;
= null
}
},
/* Because there is a Flash button floating on the button, when the page size changes, the Flash button may be misaligned and cannot be clicked
Zero Clipboard provides a reposition() method that recalculates the position of the Flash button. We can bind it to the resize event
bind(window, "resize", function(){ (); });
function bind(obj, type, fn) {
if () {
obj['e' + type + fn] = fn;
obj[type + fn] = function() {
obj['e' + type + fn]();
}
('on' + type, obj[type + fn]);
} else
(type, fn, false);
}*/
reposition: function(C) {
if (C) {
= ZeroClipboard.$(C);
if (!) {
()
}
}
if ( && ) {
var B = ();
var A = ;
= "" + + "px";
= "" + + "px"
}
},
setText: function(A) {
= A;
if () {
(A)
}
},
addEventListener: function(A, B) {
A = ().toLowerCase().replace(/^on/, "");
if (![A]) {
[A] = []
}
[A].push(B)
},
setHandCursor: function(A) {
= A;
if () {
(A)
}
},
/*When the mouse is moved to the button or clicked，Because there is Flash The obstruction of the button，So like css ":hover", ":active" Pseudo-classes may fail。
setCSSEffects() The method is to solve this problem。First we need to change the pseudo-class into a class
copy - botton: hover {
border - color: #FF6633;
}
It can be changed to ":hover" below and changed to ".hover"
copy - {
border - color: #FF6633;
}
We can call ( true ); so that Zero Clipboard will automatically handle it for us: treat class .hover as a pseudo-class :hover*/
setCSSEffects: function(A) {
= !! A
},
/*Zero Clipboard provides some events that you can customize functions to handle.
The Zero Clipboard event handler function is addEventListener(); For example, an event "load" will be triggered when Flash is fully loaded.
( "load", function(client) {
alert("Flash is loaded!");
});*/
receiveEvent: function(D, E) {
D = ().toLowerCase().replace(/^on/, "");
switch (D) {
case "load":
= ();
if (!) {
var C = this;
setTimeout(function() {
("load", null)
}, 1);
return
}
if (! && (/Firefox/) && (/Windows/)) {
var C = this;
setTimeout(function() {
("load", null)
}, 100);
= true;
return
}
= true;
();
();
break;
case "mouseover":
if ( && ) {
("hover");
if () {
("active")
}
}
break;
case "mouseout":
if ( && ) {
= false;
if (("active")) {
("active");
= true
}
("hover")
}
break;
case "mousedown":
if ( && ) {
("active")
}
break;
case "mouseup":
if ( && ) {
("active");
= false
}
break
}
if ([D]) {
for (var B = 0, A = [D].length; B < A; B++) {
var F = [D][B];
if (typeof(F) == "function") {
F(this, E)
} else {
if ((typeof(F) == "object") && ( == 2)) {
F[0][F[1]](this, E)
} else {
if (typeof(F) == "string") {
window[F](this, E)
}
}
}
}
}
}
};
The above is a detailed explanation of Javascript copy examples introduced by the editor. I hope it will be helpful to you.