用clipboard.js实现纯JS复制文本,比ZeroClipboard.js好用

《用clipboard.js实现纯JS复制文本,比ZeroClipboard.js好用》要点：
本文介绍了用clipboard.js实现纯JS复制文本,比ZeroClipboard.js好用，希望对您有用。如果有疑问，可以联系我们。

相关主题：JS、Jquery插件

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

<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>

支持的浏览器如下：

还有更多例子以及下载请看官网：https://clipboardjs.com/

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

转载请注明本页网址：
http://www.vephp.com/jiaocheng/14661.html