jQuery zclip plug-in implements cross-browser copy function_jquery

jQuery-zclip is a jQuery plug-in that copies content to the clipboard. Using it, we don’t have to consider compatibility issues between different browsers and browser versions. The jQuery-zclip plug-in requires Flash support. Remember to install Adobe Flash Player when using it.

1. jQuery-zclip usage

//引入jQuery-zclip相关js及swf文件
<script type="text/javascript" src="<%=path%>/resources/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=path%>/resources/js/jquery.zclip.min.js"></script>
<script type="text/javascript">
$(function(){
  $("#cp-btn").zclip({
    path:'<%=path%>/resources/js/ZeroClipboard.swf', //记得把ZeroClipboard.swf引入到项目中 
    copy:function(){
      return $('#inviteUrl').val();
    }
  });
});
</script>

<div class=form-row>
  <div class=col-md-5>
    <input class=form-control value="" id="inviteUrl"/>
  </div>
  <div class=col-md-1>
    <a href="javascript:void(0)" id="cp-btn"
      class="btn btn-default btn-block btn-clean">复  制</a>
  </div>
</div>

Configuration instructions
path:The path of swf (copying mainly uses flash to solve the copying of different browsers)
copy:The content to be copied can be static content or return dynamic content
beforeCopy:Copy the function to be done before;
afterCopy:Function to be done after copying;

Provides 3 methods
show:$(selected).zclip('show');//The copy function is valid
hide:$(selected).zclip('hide');//The copy function is invalid
remove:$(selected).zclip('remove');//Completely remove the copy function

2. Demonstration effect
After the operation is successful, click the copy button, and a prompt box will pop up, indicating that copying to the clipboard has taken effect, as follows:

The English characters "Copied text to clipboard" appear in the pop-up box, which is a bit inconsistent with Chinese usage habits. Change it to "Copied to clipboard successfully". Find "Copied" in the jquery.zclip.min.js file Just replace "text to clipboard" with "successfully copied to clipboard" , the effect is as follows:

The above is all the content compiled by the editor about the cross-browser copy function of the jQuery zclip plug-in. I hope it will be helpful to everyone's learning.