Home > Article > Web Front-end > JQuery zClip plug-in implements copying page content to the clipboard_jquery
I believe that everyone often encounters this function when surfing the Internet. I didn’t pay much attention to how to implement it before, until it was needed in the project.
Final effect:
After searching a lot on the Internet, it is not impossible to simply use js method, but due to the different security mechanisms of each browser, it is not cross-browser. I checked several commonly used websites, and they all use transparent flash to cover the "Copy to Clipboard" button. So when you click "Copy to Clipboard", what you click is actually Flash, and then you copy the content you need to copy. It is passed into flash, and then the incoming content is copied to the clipboard through the copy function of flash.
Load JQuery library and zclip plug-in
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> <script src="js/jquery.zclip.min.js"></script>
The following is a small demo, which mainly copies the link in the text box to the clipboard.
HTML
<input type="text" value="www.jb51.net" id="link"> <span id="copyBtn">复制链接</span>
Then add the script
<script> $('#copyBtn').zclip({ path: "ZeroClipboard.swf", copy: function(){ return $('#link').val(); } }); </script>
Then you can directly open the web page to test. This is just a simple small application. I hope everyone can master it quickly.