A-A+

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

2017年07月26日 学习小计, 编程开发 暂无评论 阅读 4,097 次
 以前很多人都是用ZeroClipboard.js来实现网页复制内容。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 Clipboard('.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/

或者直接下载:https://github.com/zenorocha/clipboard.js/archive/master.zip

给我留言

Copyright © 浩然东方 保留所有权利.   Theme  Ality 07032740

用户登录