JS implementation Click to copy the current text to the Clipboard function (compatible with all browsers) _javascript tips

Recently done projects, in the framework of the site to build the process, there is a function needs to implement the copy text to the Clipboard, I believe this function is very common, but for not often write the JS code is a big challenge, I think of 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, 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. Has anyone encountered the same situation?

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

Today for everyone to share the use of copy to the Clipboard function, 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/,

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 with 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>
 
 

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

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 simple operation.

2 JS files need to be referenced 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 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.

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.

Which replication method to use or specific positioning situation, I hope this article will help you learn JavaScript programming.