JS implements copy content to Clipboard functionality compatible with all browsers (recommended) _jquery

Two days ago listened to a H5 share, the meeting has a word, not very touching: not you can not, but you are too low to your own requirements. Very simple words, believe that many things are not people can not do, really is too low for their own requirements, if you ask for a little more, then you make progress may be even greater. Since growing up, many friends have heard a lot of inspiring their own words, but not everyone can always insist on doing it, in fact, this with their own character and the surrounding environment have a lot of relationship, can only say that more find ways, conditions to encourage themselves, and constantly improve their own requirements, have the opportunity to achieve a little more achievements.

In the second half of this year, we intend to build a site called "Mobile Development Guide" in the group, in the framework of the Web site to build the 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 i is a big challenge, think back to a previous site, Using the Window.clipboarddata implementation to copy to the Clipboard function, also only support IE and FF browser, at that time in Baidu to find a few programs, can not see down to give up, and later in the code to make a judgment, if not supported this property, directly alert: This feature does not support the browser, please manually copy the text box content, now Thinking really lazy ah, hey, there are no guns AH ~

Now on the network is actually not more detailed to explain the JS implementation copy to the Clipboard function, a lot of articles is a tedious, for the need to use the copy to the Clipboard function of children's shoes, is the comparison of egg pain, today to bring this piece of sharing, due to limited capacity, there are errors in the place also please advise ~

I believe that many of the students using WordPress built sites know that it uses jquery, is not unfamiliar to jquery, it is very simple to use, but the jquery itself does not implement the function of copying to the Clipboard, but perhaps its API will have this function. This time I built the site using WordPress, spent some time searching jquery to copy the API to the Clipboard, there is really: jquery zeroclipboard, so use it in WordPress simple to copy to the Clipboard function. But, JQuery Zeroclipboard originally has a father's adult, call zero Clipboard.

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

First look at the following figure is to use zero clipboard generated after the Flash object, it can be compatible with the FLASH10 and the following version, compatible with all browsers:

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

Use it to build a server environment, may have students are not very clear, about building a server environment, there are many methods, such as XP or Win7 system from the IIS, can also use XAMPP, Appserv, Apmserv and other integrated packages, installation can be, set up very simple, here do not introduce ~

Now we first use the standalone JS Library zero clipboard Simple implementation to copy to the Clipboard function, demo as follows:

<! DOCTYPE html>
 
 

Description

1.data-clipboard-target Enter the ID of the object to be copied

-->
<button id= "D_clip_button" class= "My_clip_button" data-clipboard-target= "Fe_text" ><b> Copy to clipboard </b></button>
<br/>
<textarea id= "Fe_text" cols= "rows=" 3 "> enter what you want to copy < /textarea>
</body>
 
 

Demo Download (Warm tip: Download code students, browse demo when you remember to use the server environment, or see the effect of ~)

The above code comment has already introduced the function of zero Clipboard, need to know more function to go to Https://github.com/zeroclipboard/ZeroClipboard

Next I'll introduce jquery Zeroclipboard

jquery Zeroclipboard is a zeroclipboard based on the improvement, abbreviated ZCLIP, as jquery api,jquery Zeroclipboard also performed very easy operation, official address: http:// www.steamdev.com/zclip/

2 JS files need to be referenced before use: Jquery.js and Jquery.zclip.js

<script type= "Text/javascript" src= "Js/jquery.js" ></script>

Now we use the jquery.zclip.js simple implementation to copy to the Clipboard feature demo as follows:

<!
DOCTYPE html>  

Demo Download (Warm tip: Download code students, browse demo when you remember to use the server environment, or see the effect of ~)

The above code combined with the operation of jquery node function, excellent play jquery.zclip.js role, such as the operation before and after the replication, dynamic insertion node, also visible jquery.zclip.js strong, use is very simple. To learn more about jquery.zclip.js features, go to http://www.steamdev.com/zclip/.

From the above independent JS Library zeroclipboard.js and Jquery.zclip.js are implemented by the Flash implementation to copy to the Clipboard function, can be seen, The use of Zeroclipboard.js brings less functionality, but it is a stand-alone 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 more wasteful broadband. What kind of copy to use or to see the specific positioning of products ~

The above mentioned is a small set of JS to introduce the copy content to the Clipboard function compatible with all browsers (recommended), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!