Copy to the Clipboard JS implementation--zeroclipboard (and solve the IE compatibility problem)

Copy to the Clipboard JS implementation--zeroclipboard (and solve the IE compatibility problem)

It is believed that the vast majority of people have encountered such features as "copy" or "Copy to Clipboard". However, due to the different implementations of the major browsers, there is almost no unified solution to implement such a function. There is no similar method or function to achieve this function by the big program ape like jquery. Including the blog park such a technical blog area of the copy of the code, nor directly copied to the Clipboard, users need to manually Ctrl + C. As follows:

This is fine for users of the general technical category, but for those who are not technical, they will find it more troublesome. Therefore, from the point of view of practicality and the improvement of user experience, we have to copy and paste the function of the Clipboard directly to the user. Today introduces a small plug-in that implements this feature, Zeroclipboard, and also discusses the problem that it can not be used under IE (I use the IE10).

1, download jquery, can Baidu Google itself.

2, download Zeroclipboard,zero Clipboard's official address: Http://zeroclipboard.org/,github Address: Https://github.com/zeroclipboard/ZeroClipboard

3, add JS Library.

<script src= "Jquery.js" type= "Text/javascript" ></script><script src= "ZeroClipboard.js" type= "text/ JavaScript "></script><script src=" Clip.js "type=" Text/javascript "></script><!-- You test or use JS---

4, HTML code.

<title= "Click to copy the current link"  href= "javascript:void (0);" Data-clipboard-text = "Paste Content" ID = "Copy" ></ a > <!-- where ID is used for JS selector, Data-clipboard-text is used to save the content you want to paste  -

5. JS Code

var New Zeroclipboard (document.getElementById ("copy")); Client.on (function(readyevent) {    Client.on (function(event) {       alert ("Copy succeeded, Address:" + event.data["Text/plain"]);});    

Well, the Jiangzi function is complete. The effect is as follows:

　　

Of course, I just pasted the content of my death, you can copy the content to the Clipboard user input or other content according to your needs. This allows you to find the appropriate usage method based on the official API.

It's okay to test in big browsers including Google Chrome, Firefox, and some homegrown browsers. But every time I talk about IE, the problem comes, when the IE browser (I use the IE10) when the problem is open, click No effect. And Google search also found that other people have similar problems, unknown. Then see the implementation of the implementation of the Internet Explorer to copy to the Clipboard, and re-optimized the above JS code, compatible with IE. After the modified JS code is as follows:

if(window.clipboarddata) {//For IE        varCOPYBTN = document.getElementById ("Copy"); Copybtn.onclick=function(){             varText = $ ("#copy"). attr ("Data-clipboard-text")); Window.clipboardData.setData (' Text ', text); Alert ("Copy succeeded, Address:" +text); }     }Else{        varClient =NewZeroclipboard (document.getElementById ("Copy")); Client.on ("Ready",function(readyevent) {Client.on ("Aftercopy",function(Event) {alert ("Copy succeeded with Address:" + event.data["Text/plain"]);        });    }); }            

OK, get it done! Now in IE can also be used normally. The effect is as follows:

However, in IE, for security reasons, IE prompts the user for permission to access the Clipboard.

All of the above code only write the key core of the section, if there is a problem, welcome to the AC Spit groove!

JS implementation--zeroclipboard copied to the Clipboard (and solve the IE compatibility problem)