美文网首页
clipboard.js实现复制功能 文字 +图片

clipboard.js实现复制功能 文字 +图片

作者: 拾钱运 | 来源:发表于2019-01-18 15:49 被阅读16次

    clipboard.js 下载地址:https://github.com/zenorocha/clipboard.js

    // 禁止选中  如果没有复制成功,可以查看一下css中有没有这段代码
    html,body{
     user-select: none;
     -moz-user-select: none;
     -webkit-user-select: none;
     -webkit-touch-callout: none;
     -webkit-text-size-adjust: none;
     -webkit-tap-highlight-color: transparent;
     -webkit-user-select: none;
    }
    
    //首先要引入clipboard.js
     <script src="js/clipboard.min.js"></script>
    <div id="copy">
    复制
    </div>
    <div class="copy-text">
      放你要复制的图片或者文字
    </div>
    <script>
     var clipboard=new ClipboardJS('#copy',{
          target:function(){
              return document.querySelector('#draw-img')
          }
      })
      clipboard.on('success', function(e) {
        //alert(e.text);
        console.log(e); 
        clipboard.destroy();// 复制完毕删除,否则会有创建多个clipboard对象
      alert('复制成功')
    });
    clipboard.on('error', function(e) {
            console.log(e);
        });
    
    </script>
    

    相关文章

      网友评论

          本文标题:clipboard.js实现复制功能 文字 +图片

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