用clipboard.js实现纯JS复制文本到剪切板

 

2018年05月29日 17:42:26 阅读数：126更多

个人分类： html前端

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.youkuaiyun.com/TiaoZhanJi_Xian/article/details/80499624

ZeroClipboard是利用flash来实现的，ZeroClipboard兼容性很好，但是由于现在越来越多的浏览器不支持flash，导致一些没法正常使用了。

今天火端开始使用clipboard.js来复制网页文本内容了，clipboard.js不需要flash，也不依赖其它的js库，min版仅11KB，GZIP压缩后仅3KB，非常的小巧。

使用起来也非常的简单，代码如下：

 

1.     <input id="foo" value="这里是内容">
2.     <button class="btn" data-clipboard-target="#foo">点击复制</button>
3.     <script src="dist/clipboard.min.js"></script>
4.     <script>
5.     new Clipboard('.btn');
6.     <script>

如果要添加事件，可以这样

 

1.     <input id="foo" value="这里是内容">
2.     <button class="btn" data-clipboard-target="#foo">点击复制</button>
3.     <script src="dist/clipboard.min.js"></script>
4.     <script>
5.     var clipboard = new ClipboardJS('.btn');
6.     clipboard.on('success', function(e) {
7.             alert("复制成功!");
8.              e.clearSelection();
9.     });
10.     clipboard.on('error', function(e) {
11.               alert("复制失败!");
12.     });
13.     <script>

支持的浏览器如下：

具体可以看官网：https://clipboardjs.com/