js实现复制（zclip）

今天后台问我用过zclip没，没听过就去百度了下，原来是个复制功能的插件，于是就学习了下。。没想到还是有几个坑的

github地址：zclip

不废话上步骤

1. 引入文件

引入js、zclip.js
<script src="jquery-3.2.1.js" charset="utf-8"></script>
<script type="text/javascript" src="zclip/jquery.zclip.js"></script>
后面还有个.swf需要放在文件夹里

2. 页面html
   <input type="text" id="mess"></input>
<div> <a id="copy" class="copy">复制</a> </div>
<input type="text" id="mess1"></input>
<div> <a id="copy1" class="copy">复制</a> </div>
<input type="text" id="mess2"></input>
<div> <a id="copy2" class="copy">复制</a> </div>
3. 复制按钮绑定zclip

$('.copy').each(function(){
$(this).zclip({
path: "zclip/ZeroClipboard.swf",
copy: function(){
var copyText = $(this).parent().prev().val();
if(!copyText || " " == copyText){
return null;
}
return copyText;
},
beforeCopy:function(){/* 按住鼠标时的操作 /
$('#mess').select();
},
afterCopy:function(){/ 复制成功后的操作 */
alert("复制成功");
}
});
})

我这里写的是多个复制按钮的情况
如果只有一个，给复制按钮个id就ok

踩得坑

• 必须在服务环境运行
• 复制按钮需要包层div，且css设置div{position: relative; display: inline-block; }
  因为会生成div包emded标签，而这个div是根据absolute定位的，如果按钮没有父级元素或者没有css position:relative，那两个标签无法重合，点复制就没反应。。