美文网首页
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