Copy content to clipboard compatible browser with js_javascript tips

If you want to copy content to the clipboard through js, it is not difficult at first. However, if you consider the browser compatibility issue, it becomes a bit troublesome. Using jquery-zclip to copy is a good choice. Use flash to achieve browser compatibility. . I won’t go into details about the principle, but let’s talk about how to implement it.

For example, my html code is as follows:

Copy the code The code is as follows:

<span id="id_1">Content to be copied 1</span>
<span id="id_2">Content to be copied 2</span>
< span id="id_3">Content to be copied 3</span>

A total of two js files are required, not to mention jquery , and then there are jquery-zclip.js and ZeroClipboard.swf. These two files can be downloaded on the official website at the following address: http://www.steamdev.com/zclip/

Generate copy button js is as follows

Copy code The code is as follows:

This enables cross-browser copying. It’s not a difficult thing to do. It went smoothly when I tested it. But when I put it into the project, something went wrong. There was no flash where the copy button was generated. , only text. Later, I found out that the flash was actually generated, but not where the text was. It may have something to do with the iframe structure used in the background of my project. I guess this is a bug of this plug-in. After checking a lot of information, there was People said that the code needs to be changed, and then I changed it and it worked.

The code that needs to be modified is as follows

Copy Code The code is as follows:

getDOMObjectPosition: function (obj, stopObj) {
// get absolute coordinates for dom element
var info = {
left: 0,
top: 0,
width: obj.width ? obj.width : obj.offsetWidth,
height: obj.height ? obj.height : obj.offsetHeight
} ;

if (obj && (obj != stopObj)) {
//info.left = obj.offsetLeft; //Before modification
//info.top = obj.offsetTop; / /Before modification
jpos = $(obj).position(); //After modification
info.left = jpos.left; //After modification
info.top = jpos.top; //After modification After
}

return info;
}

Actually, this is related to the principle of this plug-in. He covers the button with a transparent flash. If the two of them do not overlap, the above problem will arise.