Home > Web Front-end > JS Tutorial > body text

JQuery zClip plug-in implements copying page content to the clipboard_jquery

WBOY
Release: 2016-05-16 15:34:06
Original
1356 people have browsed it

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> 
Copy after login

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> 
Copy after login

Then add the script

<script> 
    $('#copyBtn').zclip({ 
      path: "ZeroClipboard.swf", 
      copy: function(){ 
        return $('#link').val(); 
       } 
    }); 
</script> 
Copy after login

Then you can directly open the web page to test. This is just a simple small application. I hope everyone can master it quickly.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template