美文网首页前端忐忑历程
clipboard.js实现JS复制文本

clipboard.js实现JS复制文本

作者: 小鳄鱼的大哥哦 | 来源:发表于2018-01-09 18:06 被阅读931次

    最近发现一个很好用的无依赖的插件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吧。

    相关文章

      网友评论

        本文标题:clipboard.js实现JS复制文本

        本文链接:https://www.haomeiwen.com/subject/bhjgnxtx.html