JS implementation Copy to clipboard function, compatible with all browsers

Two days ago listened to a H5 share, the meeting there is a sentence, it is very emotional: not you can not, but you are too low on their own requirements. Very simple words, believe that a lot of things are not people do not, really is the requirements of their own too low, if you ask for more, then you can achieve greater progress. Since growing up, many friends have also heard that many motivate themselves, but not everyone can always adhere to do down, in fact, this with their own character and the surrounding environment has a great relationship, can only say that more methods, conditions for their encouragement, and constantly improve their own requirements, only the opportunity to obtain a little more achievements.

Directory (updated at 20170103, supports mobile iOS replication)

• Objective
• Standalone JS Library zero clipboard for copy to Clipboard functionality
• JQuery zeroclipboard Implementation Copy to Clipboard feature (hot)
• Clipboard.js implementation Copy to clipboard (with mobile iOS copy) (Hot)

Objective

In the second half of this year to build a group called "Mobile Development Guide" site, in the site framework building process, there is a function need to implement copy text to the Clipboard, I believe this function is very common, but for not often write JS code for me is a relatively big challenge, think of a site that has been done before, The use of Window.clipboarddata to copy to the Clipboard function, but also only support IE and FF browser, at that time in Baidu to find a few solutions, see not down on the give up, and later in the code to make a judgment, if not support the property, directly alert: This feature does not support the browser, please manually copy the text box content, now In thinking really lazy ah, hey, there is no man gun ah ~

Alert ("This feature does not support this browser, please copy the contents of the text box manually");

Now on the network actually did not explain in detail JS implementation copy to the Clipboard function, a lot of articles are times, for the need to use copy to the Clipboard function of children's shoes, is compared to the egg pain, today to everyone to bring this piece of sharing, due to limited capacity, there is the wrong place also please a lot of advice ~

Independent JS Library Zero clipboard simple implementation Copy to clipboard function

Believe that many use WordPress to build the site of the students know it uses jquery, the jquery is not unfamiliar to everyone, it is very simple to use, unfortunately, jquery itself does not realize the function of copying to the Clipboard, but perhaps its API will have this feature. This time I set up the site using WordPress, took a little time to search jquery copy to the Clipboard API, but also really: jquery Zeroclipboard, so use it in WordPress Simple implementation of the copy to the Clipboard function. But, JQuery Zeroclipboard turned out to have a father, called Zero Clipboard.

Zero Clipboard as a standalone JS library, it uses Flash to replicate, requires two files: Zeroclipboard.js and zeroclipboard.swf. There are 2 versions on the network, the implementation principle is to use Flash to copy, do not know who the original is, may also be family of the 2 brothers, this is no matter, as long as we do respect copyright, express a clear conscience, today to introduce this version is relatively simple.

The first is the Flash object generated after using the zero clipboard, it is compatible with the FLASH10 and the following versions, compatible with all browsers:

The official address of Zero clipboard: Http://zeroclipboard.org/,github Address: Https://github.com/zeroclipboard/ZeroClipboard

Use it needs to build server environment, may have classmates are not very clear, about building server environment, methods have many, such as XP or Win7 system comes with IIS, can also use XAMPP, Appserv, Apmserv and other integration package, installation can, build up very simple, here do not introduce ~

The demo is as follows:

<! DOCTYPE Html>
Demo Download (Warm tip: Download the code of the classmate, browse the demo when you remember to use the server environment, otherwise do not see the effect of ~)
The above code comment has already introduced the function of zero Clipboard, need to know more function please go to Https://github.com/zeroclipboard/ZeroClipboard
jQuery zeroclipboard implement copy to Clipboard feature
jquery Zeroclipboard is an improvement on the basis of Zeroclipboard, referred to as Zclip, as the api,jquery Zeroclipboard of jquery is also a very simple operation, official address:/HTTP www.steamdev.com/zclip/
Refer to 2 JS files before use: Jquery.js and Jquery.zclip.js
<script type= "Text/javascript" src= "js/jquery.js" ></script><script type= "Text/javascript" src= "js/ Jquery.zclip.js "></script>
Now we use the jquery.zclip.js simple implementation Copy to clipboard function demo as follows:
<! DOCTYPE html>
Demo Download (Warm tip: Download the code of the classmate, browse the demo when you remember to use the server environment, otherwise do not see the effect of ~)
The above code in conjunction with the function of the Operation node jquery, excellent play the role of jquery.zclip.js, such as pre-and post-replication operations, dynamic insertion of nodes, but also visible jquery.zclip.js powerful, use is very simple. You need to learn more about Jquery.zclip.js's features in http://www.steamdev.com/zclip/
From the above independent JS Library zeroclipboard.js and Jquery.zclip.js are implemented using Flash implementation to copy to the Clipboard function, you can see, The use of Zeroclipboard.js brings relatively little functionality, but it is a separate library, the file is relatively small, and the use of jquery.zclip.js after the function is relatively rich, but for the site does not use the jquery framework, the use of jquery.zclip.js is a relatively wasteful broadband. Which replication method to use or to see the specific positioning of the product ~
20170110 supplemental clipboard.js implementation Copy to Clipboard
Clipboard.js implementation Copy to clipboard (with mobile iOS copy)
Instead of flash copied to the Clipboard, better page performance will not cause the card to imagine, not only compatible PC-side, but also elegant compatible with mobile iOS Safari browser, specifically can refer to my project https://wepayui.github.io/#/start/
Official Documents and: https://clipboardjs.com/
JS implementation Copy to clipboard function, compatible with all browsers