JS implementation for copying data to the clipboard -- ZeroClipboard (also solves IE compatibility issues)
For general technical users, this is nothing, but for non-technical users, it will feel more troublesome. Therefore, from the perspective of practicality and User Experience Improvement, you must copy and paste the clipboard directly to the user. Today we will introduce a small plug-in that implements this function, ZeroClipboard, and discuss the issues that cannot be used in IE (I use IE10 ). 1. Download jQuery and use Baidu Google. 2. Download ZeroClipboard. The official address of Zero Clipboard is repository 3. Add a 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> <! -- Js you are testing or using --> 4. html code. <A title = "click to copy the current link" href = "javascript: void (0 ); "data-clipboard-text =" paste content "id =" copy "> </a> <! -- Id is used for js selector and data-clipboard-text is used to save the content you want to paste --> 5. JS Code var client = new ZeroClipboard (document. getElementById ("copy"); client. on ("ready", function (readyEvent) {client. on ("aftercopy", function (event) {alert ("Copied successfully, address:" + event. data ["text/plain"]) ;};}); All right, the purple sauce function is complete. The effect is as follows: Of course, I only pasted the dead content here. You can copy the content to the clipboard user input or other content as needed. You can find the corresponding use method based on the official API. It is okay to test all major browsers, including Google browsers, Firefox and some domestic browsers. But every time I talk about IE, the problem comes. When I open it in IE (I use IE10), the problem occurs, and clicking it doesn't work. Google's search also found that other people had similar problems, but it was not clear. Then I checked the implementation method of copying IE to the clipboard, optimized the above JS Code again, and compatible with IE. The modified JS Code is as follows: copy the Code if (window. clipboardData) {// for IE var copyBtn = document. getElementById ("copy"); copyBtn. onclick = function () {var text = $ ("# copy "). attr ("data-clipboard-text"); window. clipboardData. setData ('text', text); alert ("Copied successfully, address:" + text) ;}} else {var client = new ZeroClipboard (document. getElementById ("copy"); client. on ("ready", function (readyEvent) {client. on ("aftercopy", function (event) {alert ("Copied successfully, address:" + event. data ["text/plain"]) ;}) ;}