JS 一键复制插件应用 和 原生实现

一、目前来说复制功能 clipboard.js基本可以兼容所有浏览器，可以任意复制文本，官方地址 https://clipboardjs.com/

1、进入官方网站下载 然后引入

<script src="js/clipboard.min.js"></script>

2、运用模板

   var clipboard = new ClipboardJS('.copy-btn');
        clipboard.on('success', function(e) {
            $('p').hide()
            alert('复制成功')
              console.log(e);//可以输出看到复制的所有信息
           });
           clipboard.on('error', function(e) {
           console.log(e);
        });

3、确定复制目标    data-clipboard-target='xxxx'

<span class='copy-btn'  data-clipboard-target='#Link"+i+"'>复制</span>  //复制id=Link的容器里的文本，因为我在这里是动态加载，所以用到了Link"+i+"

<p id='Link"+i+"' style='display:none'>"+data.info.serverUrl+data.info.pageInfo.list[i].link+"</p> //这是要复制的内容，动态加载，用id='Link"+i+"'

二、原生实现

1、复制其他目标文本

html

<textarea cols="" rows="" id="weixinhao" style="height: 20px;border: none;text-align: center;color: #3be09c;font-size: 18px;margin-top:8px;outline:none">要复制的内容</textarea>
<div style="margin-top: 10px;width: 60%;padding: 6px 0;background: #3be09c;color: #fff;border-radius: 18px;font-size: 14px;" id="copyWx">复制到粘贴板</div>

JS

document.getElementById("copyWx").onclick=function(){
                    var weixin=document.getElementById("weixinhao");//复制目标
                    weixin.select();
                    document.execCommand("Copy");
                    alert("复制成功");
                }

2、复制点击本身文本

html

<div id="cardList">
             <div class="btn">点击我，复制我</div>
          </div>

JS

           function copy(str){ // str是要复制的目标
               var save = function (e){
                    e.clipboardData.setData('text/plain',str);//下面会说到clipboardData对象
                     e.preventDefault();//阻止默认行为
                 }
                 document.addEventListener('copy',save);
                 document.execCommand("copy");//使文档处于可编辑状态，否则无效
            }

             document.getElementById('cardList').addEventListener('click',function(ev){
                  copy(ev.target.innerText) //调用事件
                  alert('复制成功')
             })