在PC端上通过点击按钮复制对应文本的业务场景，不经常有，但是让我碰见了，也了解了下实现方法。

1、通过createElement生成一个input输入框，并将其透明度设为0，使得用户无感知；

2、将需要复制的内容赋值到输入框内，（一定要将输入框添加到页面body中）才能使用select函数选中。

3、通过document.execCommand(“copy”)执行浏览器复制命令，就能将对应文本进行复制了

function handleCopy(text) {
  const input = document.createElement('input')
  input.style.cssText = 'opacity: 0;';
  input.type = 'text';
  input.value = text; // 修改文本框的内容
  document.body.appendChild(input)
  input.select(); // 选中文本
  document.execCommand("copy"); // 执行浏览器复制命令
  this.$message({message: '复制成功',type: 'success'})
},

点击按钮，执行复制指定位置的文本，具体实现方案如下：

1、添加点击事件

<span class="copyMa" @click="copy()">点击复制</span>

2、copy的实现方法（未优化）

copy(){
     let random = this.$refs.randomCodeRef.innerHTML;
     const input = document.createElement('input');
     document.body.appendChild(input);
     input.setAttribute('value',random);
     input.select();
     document.execCommand("Copy");
},

3、以上方法点击一次就会执行一次复制，也就是说会在body里创建一个input标签，点击n次就会创建n个，不符合逻辑，做以下优化，复制完之后将创建出来的input的dom移除（优化方案）

copy(){
     let random = this.$refs.randomCodeRef.innerHTML;
     const input = document.createElement('input');
     document.body.appendChild(input);
     input.setAttribute('value',random);
     input.setAttribute('create',1);
     input.select();
     document.execCommand("Copy");
     var list=document.getElementsByTagName('input')
     var inputList = Array.prototype.slice.call(list)
     inputList.forEach((item)=>{
         if(item.getAttribute('create'))document.body.removeChild(item);
     });
},

注意：如果复制的文本需要换行展示，就不能使用上面的动态创建 input 标签，因为 input 标签是单文本标签，不会换行，也就是\r\n不起作用，但是\t空格还是起作用的，所以建议使用 textarea 所以如果你复制的文本需要换行展示，就可以参考以下方法：

//如下换行设置 \r\n

copy(){
     let copyText = "分享链接：\r\n"+this.shareQrcodeUrl+"\r\n";

     copyText = copyText +"分享码:"+this.shareCode+"\r\n";

     const input = document.createElement('textarea');
     document.body.appendChild(input);
     input.innerHTML = copyText;
     input.setAttribute('code',1);
     input.select();
     document.execCommand("Copy");

     var list = document.getElementsByTagName('textarea');
     var inputList = Array.prototype.slice.call(list);
     inputList.forEach((item)=>{
            if(item.getAttribute('code'))document.body.removeChild(item);
     });
},

最近遇到一个需求，需要点击按钮，复制 <p> 标签中的文本到剪切板

之前做过复制输入框的内容，原以为差不多，结果发现根本行不通

尝试了各种办法，最后使了个障眼法，实现了下面的效果

一、原理分析

浏览器提供了 copy 命令 ，可以复制选中的内容

document.execCommand("copy")

如果是输入框，可以通过 select() 方法，选中输入框的文本，然后调用  copy 命令，将文本复制到剪切板

但是 select() 方法只对 <input> 和 <textarea> 有效，对于 <p> 就不好使

最后我的解决方案是，在页面中添加一个 <textarea>，然后把它隐藏掉

点击按钮的时候，先把 <textarea> 的 value 改为 <p> 的 innerText，然后复制 <textarea> 中的内容

二、代码实现

HTML 部分

<style type="text/css">
   .wrapper {position: relative;}
   #input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}
</style>

<div class="wrapper">
   <p id="text">我把你当兄弟你却想着复制我？</p>
   <textarea id="input">这是幕后黑手</textarea>
   <button onclick="copyText()">copy</button>
</div>

JS 部分

<script type="text/javascript">
    function copyText() {
      var text = document.getElementById("text").innerText;
      var input = document.getElementById("input");
      input.value = text; // 修改文本框的内容
      input.select(); // 选中文本
      document.execCommand("copy"); // 执行浏览器复制命令
      alert("复制成功");
    }
  </script>

亲测，Firefox 48.0，Chrome 60.0，IE 8 都能用