分享

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

 黄三岁大爱人生 2018-08-25

  以前很多人都是用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>

支持的浏览器如下:

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多