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

2020-05-29 10:46:51 浏览数 (1)

ZeroClipboard是利用flash来实现的,ZeroClipboard兼容性很好,但是由于现在越来越多的浏览器不支持flash,导致一些没法正常使用了。

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

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

代码语言:javascript复制
    <input id="foo" value="这里是内容">
    <button class="btn" data-clipboard-target="#foo">点击复制</button>
    <script src="dist/clipboard.min.js"></script>
    <script>
    new Clipboard('.btn');
    <script>

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

代码语言:javascript复制
    <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/

0 人点赞