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

2019-01-18  本文已影响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>
上一篇下一篇

猜你喜欢

热点阅读