clipboard.js实现JS复制文本

来源:简书 分类: 文章浏览史 发布时间:2020-05-16 01:37:14 最后更新:2020-05-16 浏览:577
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-05-16 01:37:14

最近发现一个很好用的无依赖的插件clipboard.js。兼容当前主流的浏览器,不依赖于flash

本人是非常推荐该插件,使用简单,方便。clipboard也是目前非常流行的用于复制各种文本的插件。
目前的star

使用方式
<script src="clipboard.min.js"></script>
也可以使用CDN
<script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.js"></script>
引入之后就可以直接使用了,非常方便,这里只推荐最实用也最简单的使用方法,其他的并不推荐,需要了解的可以上github阅读源码。
HTML代码:

<div>
        <!--需要被复制的对象1-->
    推荐码:<span>123456</span>
</div>
<p>
        <!--需要被复制的对象2-->
    账号:<input type="text" value="654321" />
</p>
<button>复制按钮</button>

JS代码:

 //绑定点击事件
document.querySelector('button').onclick = copy();
function copy() {
    //通过function复制
    var clipboard = new Clipboard('button', {
    // 通过target选择需要被复制的对象
        target: function() {
            return document.querySelector('span'); //复制标签文本
            //return document.querySelector('input'); 复制文本框的值
        }
    });

    clipboard.on('success', function(e) {
        //复制成功之后的回调
        console.log(e);
        //提示:这里是个坑,需要手动销毁当前的clipboard,否则会触发两次事件
        clipboard.destroy();
    });

    clipboard.on('error', function(e) {
        //执行失败后需要做的事...
        console.log(e);
        clipboard.destroy();
    });
}

上面的使用方式就是最简单而且灵活无副作用的方法了,很方便吧。
赶快试试,喜欢的话希望给clipboard的作者一颗star吧。

php技术微信