The jQuery plug-in Zclip is perfectly compatible with browsers that click to copy content to the clipboard, jqueryzclip

The jQuery plug-in Zclip is perfectly compatible with browsers that click to copy content to the clipboard, jqueryzclip

In WEB development, users need to copy a piece of code, URL address, and other information on the page. To avoid errors that may occur when users drag the mouse and right-click the copy operation, you can directly place a copy button on the page. You only need to click this copy button to copy the content and paste it to the desired place.

HTML

First, you need to load the jquery library and zclip plug-in on the page. These two files have been packaged. Click to download them.

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.zclip.min.js"></script> 

Then we add the following code to the body part of the page:

<Textarea id = "mytext"> enter content </textarea> <br/> <a href = "#" id = "copy_input" class = "copy"> copy content </a>

The page contains an input box textarea, which can also be other html elements, followed by a copy button or link text.

Javascript

When you click "copy content", call the zclip plug-in and prompt that the copy is successful. Please refer to the Code:

$ (Function () {$ ('# copy_input '). zclip ({path: 'js/ZeroClipboard.swf ', copy: function () {// copy content return $ (' # mytext '). val () ;}, afterCopy: function () {// copied $ ("<span id = 'msg '/> "). insertAfter ($ ('# copy_input ')). text ('copied successfully ');}});});

It is worth noting that if the copied content comes from input and textarea in the input box, the copy object uses:

copy: function(){   return $('#mytext').val(); } 

If the copied content comes from the page elements such as div and p, the copy object uses:
Copy: $ ('# mytext'). text ();
In this way, the function of copying content to the clipboard is completed.
Parameter description
Path: The swf call path, which must be. For example, the js/zeroclipboard.swf and zeroclipboard.swf files already exist in the download package.
Copy: the copied content, which must be any string or the content returned by the callback function.
BeforeCopy: callback function before copying content. Optional.
AfterCopy: callback function after copying content. Optional.

The above is all the content of this article. I hope you will like it.