jQuery plug-in Zclip realizes perfect compatibility with every browser and clicks to copy content to the clipboard_jquery

In WEB development, users are asked to copy a piece of code, URL address and other information on the page. In order to avoid possible errors when the user drags the mouse and then right-clicks to copy, we can directly place a copy button on the page. Just click on this copy button, the content will be copied, and then the user can paste where they want to paste.

HTML

First, you need to load the jquery library and zclip plug-in into the page. These two files have been packaged. You are welcome to click to download.

<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">请输入内容</textarea><br/> 
<a href="#" id="copy_input" class="copy">复制内容</a>

An input box textarea is placed on the page. Of course it can also be other html elements, and then there is a copy button, which can also be in the form of link text.

Javascript

When "Copy Content" is clicked, the zclip plug-in is called and the copy is successful. Please see the code:

$(function(){ 
  $('#copy_input').zclip({ 
    path: 'js/ZeroClipboard.swf', 
    copy: function(){//复制内容 
      return $('#mytext').val(); 
    }, 
    afterCopy: function(){//复制成功 
      $("<span id='msg'/>").insertAfter($('#copy_input')).text('复制成功'); 
    } 
  }); 
}); 

It is worth noting that if the copied content comes from input box input, textarea, etc., use the copy object:

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

If the copied content comes from page elements div, p, etc., use the copy object:
copy: $('#mytext').text();
This completes the function of copying content to the clipboard.
Parameter description
path: swf calling path, required, such as js/ZeroClipboard.swf, the ZeroClipboard.swf file already exists in the download package.
copy: The copied content must be any string, or it can be the content returned by the callback function
beforeCopy: callback function before copying content, optional
afterCopy: callback function after copying content, optional

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