TypechoJoeTheme

至尊技术网

统计
登录
用户名
密码
/
注册
用户名
邮箱

js点击复制内容

2019-10-10
/
0 评论
/
1,093 阅读
/
正在检测是否收录...
10/10

使用方法很简单,把.btn改成你需要点击复制的元素里的class或者id,再把www.zzwws.cn替换你需要点击复制的内容即可!

<script src="https://cdn.bootcss.com/clipboard.js/1.5.15/clipboard.min.js"></script>
<script>
   // 第一种,点击btn按钮,直接通过text直接返回复印的内容
   var clipboard = new Clipboard('.btn', { // 最新版本用ClipboardJS()
       text: function() {
           return 'www.zzwws.cn';
       }
   });

    // 第二种
    /*
    剪切
    <textarea id="bar">Mussum ipsum cacilds...</textarea>
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
    </button>
    
    复制
    <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
        Copy to clipboard
    </button>

    var clipboard = new Clipboard('.btn');
    */

   clipboard.on('success', function(e) {
       console.log(e);
       e.clearSelection();// 清除选中状态
       clipboard.destroy();// 释放内存
   });

   clipboard.on('error', function(e) {
       console.log(e);
       e.clearSelection();// 清除选中状态
       clipboard.destroy();// 释放内存
   });
   $(".btn").on("click", function (event) {
       event.stopPropagation();// 阻止事件冒泡和事件捕获
       // event.stopImmediatePropagation();// 阻止同层级事件的冒泡,后面出现的btn点击事件不会执行
   });
  
  // 第三种,使用Clipboard API和document.execCommand,不用clipboard
  $(".btn").on("click", function (event) {
       copyToClip('内容');
   });

function copyToClip(content,success = '',error = '') {
  var textarea = document.createElement('textarea');
  textarea.value = content;
  document.body.appendChild(textarea);

  textarea.select();
  var res = document.execCommand("copy");

  document.body.removeChild(textarea);
  if(res){
      // console.log("文本已成功复制到剪贴板");
      if(typeof success === 'function'){
            success();
      }
  }else{
    if(typeof navigator.clipboard !== "undefined"){
      navigator.clipboard.writeText(content)
      .then(function() {
           // console.log("文本已成功复制到剪贴板");
           if(typeof success === 'function'){
                success();
           }
      })
      .catch(function(err) {
           // console.error("无法复制文本到剪贴板", err);
           if(typeof error === 'function'){
                error();
           }
      });
    }else{
      // console.log("无法复制文本到剪贴板");
      if(typeof error === 'function'){
        error();
      }
    }
  }
}
</script> 
jsclipboard复制剪切
朗读
赞(0)
版权属于:

至尊技术网

本文链接:

https://www.zzwws.cn/archives/1354/(转载时请注明本文出处及文章链接)

评论 (0)