复制文字到剪贴板clipboard.js

近期做的一个公众号项目需要实现一个功能，就是点击按钮复制文字到剪贴板。出于种种因素的考虑，在网上找到一个了一个不错的开源代码—clipboard.js，压缩之后只有3kb,而且在各种浏览器兼容性都比较好(兼容IE9+浏览器，兼容安卓和IOS系统)。

官网地址：https://clipboardjs.com/

下面是一个简单的运用实例

首先引入代码，可下载保存到本地，也可直接引用网址，这里直接引用网址

<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>    

接下来是html部分

<input id="target01" type="text"  value="这是一段文字这是一段文字这05">
<button class="copy_btn" data-clipboard-target="target01" data-clipboard-action="copy">复制</button>

js部分

var clipboard = new Clipboard(".copy_btn");    
clipboard.on('success', function(e) {    //复制成功，弹出提示框
    alert("复制成功")；
});  
clipboard.on('error', function(e) { 
    alert("当前浏览器不支持此功能，请手动复制。");
});

项目实例代码如下：

html部分

<ul class="copyBox" id="copyBox">
	<li class="clearfix">
		<p>这是一段文字01</p>
		<button class="copy_btn">复制</button>
		<input type="text" value="这是一段文字01">
	</li>
	<li class="clearfix">
		<p>这是一段文字02</p>
		<button class="copy_btn">复制</button>
		<input type="text" value="这是一段文字02">
	</li>
	<li class="clearfix">
		<p>这是一段文字03</p>
		<button class="copy_btn">复制</button>
		<input type="text" value="这是一段文字03">
	</li>
	<li class="clearfix">
		<p>这是一段文字04</p>
		<button class="copy_btn">复制</button>
		<input type="text" value="这是一段文字04">
	</li>
	<li class="clearfix">
		<p>这是一段文字05</p>
		<button class="copy_btn">复制</button>
		<input type="text" value="这是一段文字05">
	</li>
</ul>
<div id="tips">复制成功</div>

js部分

var copyBox = document.getElementById("copyBox"); //获取父元素
var copyLi = copyBox.getElementsByTagName("li"); //获取li元素

for(var i=0,len=copyLi.length;i<len;i++){ //遍历所有li元素
	copyLi[i].setAttribute("index",i); //为li元素一次设置升序的index值，0，1，2，3...
	var copyText = copyLi[i].children[0]; //为
	copyText.id = "target0"+i;
	var copyBtn = copyLi[i].children[1];
	var cBI = "#target0"+i;
	copyBtn.setAttribute("data-clipboard-target",cBI);
	copyBtn.setAttribute("data-clipboard-action","copy");
}

var tips = document.getElementById("tips");

var clipboard = new Clipboard(".copy_btn");    
      clipboard.on('success', function(e) {    //自定义复制成功时弹出“复制成功“的提示然后消失
          var t = setTimeout(function(){
          	tips.style.display = "block";
          },500)
          var t2 = setTimeout(function(){
          	tips.style.display = "none";
          },2000)
      });  
      clipboard.on('error', function(e) {
          alert("当前浏览器不支持此功能，请手动复制。");
      });