点击复制-点击div或者p标签复制内容到剪切板

点击复制-点击div或者p标签复制内容到剪切板

最近在做一个需求，就是需要点击div或者p标签需要复制其中的内容到剪切板中，可以快速的粘贴
如图下所示：

首先先看MDN的document.execCommand的命令
命令是这样描述的
当一个HTML文档切换到设计模式 designMode时，文档对象暴露 execCommand 方法，该方法允许运行命令来操纵可编辑区域的内容。大多数命令影响文档的选择（粗体，斜体等），而其他命令插入新元素（添加链接）或影响整行（缩进）。当使用contentEditable时，调用 execCommand() 将影响当前活动的可编辑元素。
代码如下

点击的是按钮，但是复制的是input框中的内容

<p>点击复制后在右边textarea CTRL+V看一下</p>
<input type="text" id="inputText" value="测试文本"/>
<input type="button" id="btn" value="复制"/>
<textarea rows="4"></textarea>
<script type="text/javascript">
    var btn = document.getElementById('btn');
    btn.addEventListener('click', function(){
        var inputText = document.getElementById('inputText');
        var currentFocus = document.activeElement;
        inputText.focus();
        inputText.setSelectionRange(0, inputText.value.length);
        document.execCommand('copy', true);
        currentFocus.focus();
    });
</script>

点击的是div或者p标签

但是当点击div或者p标签时，并不能上面的方法一样，这时就要曲线救国一下。使用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>

script部分

<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>

亲测好用，简直无敌，可见灵活运用知识的重要性啊