JS implementation for copying data to the clipboard -- ZeroClipboard (also solves IE compatibility issues)

Source: Internet
Author: User

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"]) ;}) ;}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.