1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 用clipboard.js实现纯JS复制文本到剪切板

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

时间:2019-06-20 22:44:50

相关推荐

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

以前很多人都是用ZeroClipboard.js来实现网页复制内容,火端也是用它。ZeroClipboard是利用flash来实现的,ZeroClipboard兼容性很好,但是由于现在越来越多的浏览器不支持flash,导致一些没法正常使用了。

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

使用起来也非常的简单,代码如下:

<input id="foo" value="这里是内容"><button class="btn" data-clipboard-target="#foo">点击复制</button><script src="dist/clipboard.min.js"></script><script>new Clipboard('.btn');//首先需要您需要通过传递DOM选择器,HTML元素或HTML元素列表来实例化它。<script>

如果要添加事件,可以这样:

<input id="foo" value="这里是内容"><button class="btn" data-clipboard-target="#foo">点击复制</button><script src="dist/clipboard.min.js"></script><script>var clipboard = new Clipboard('.btn');clipboard.on('success', function(e) {alert("复制成功!");e.clearSelection();});clipboard.on('error', function(e) {alert("复制失败!");});<script>

支持的浏览器如下:

还有更多例子以及下载请看官网:/

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

本文地址:/clipboardjs.html

本文作者:火端网络,转载请务必以超链接形式注明出处。

clipboard.js基本使用:/p/3f8867de041e

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。