在页面内添加复制按钮至剪切板
一个简单好用的工具clipboard.js
我的使用场景
本文只截取了自己使用过程中的一个小demo,详细的使用方法请移步clipboard.js下载使用官方说明案例
引用js,下载clipboard.js,引用至文档
<script src="../dist/clipboard.min.js"></script>
//或使用CDN
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>
我最喜欢的添加方式,html结构简要如下
<button class="btn">Copy</button>
<div>hello</div>
js代码,创建对象后设置监听对象,return后就是你选中的要监听的节点,本人使用的时候发现这个思路比较简单(其实其他方式也简单)
<script>
var clipboard = new Clipboard('.btn', {
target: function() {
return document.querySelector('div');
}
});
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
有兴趣的朋友可以自己测试下,愿世界和平。