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

举报
黄啊码 发表于 2022/06/29 01:01:05 2022/06/29
【摘要】 ZeroClipboard是利用flash来实现的,ZeroClipboard兼容性很好,但是由于现在越来越多的浏览器不支持flash,导致一些没法正常使用了。 今天火端开始使用clipboard.js来复制网页文本内容了,clipboard.js不需要flash,也不依赖其它的js库,min版仅11KB,GZIP压缩后仅3KB,非常的...

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/

文章来源: markwcm.blog.csdn.net,作者:黄啊码,版权归原作者所有,如需转载,请联系作者。

原文链接:markwcm.blog.csdn.net/article/details/80499624

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。