文本拷贝插件——clipboard.js

clipboard.js是一款强大且实用的文本拷贝插件, 目前github的stars量30K以上

中文文档:

http://www.clipboardjs.cn/

1、通过npm工具安装

npm install clipboard --save

2、html文件直接导入

github搜索clipboard直接下载源码文件包

<script src="js/clipboard.min.js"></script>

也可以使用CDN

<script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.js"></script>

现在需要通过传递一个DOM选择器、一个HTML标签或者一组HTML标签来实例化它

new ClipboardJS('.btn'); //通过类名.btn的元素实例化

HTML代码：

<div>
<!--需要被复制的对象1-->
推荐码：<span>123456</span>
</div>
<p>
<!--需要被复制的对象2-->
账号：<input type="text" value="654321" />
</p>
<button>复制按钮</button>

JS代码:

//绑定点击事件
document.querySelector('button').onclick = copy();
function copy() {
//通过function复制
var clipboard = new Clipboard('button', {
// 通过target选择需要被复制的对象
target: function() {
return document.querySelector('span'); //复制标签文本
//return document.querySelector('input'); 复制文本框的值
}
});
clipboard.on('success', function(e) {
//复制成功之后的回调
console.log(e);
//提示：这里是个坑,需要手动销毁当前的clipboard,否则会触发两次事件
clipboard.destroy();
});
clipboard.on('error', function(e) {
//执行失败后需要做的事...
console.log(e);
clipboard.destroy();
});
}