JS复制文本到粘贴板，前端H5移动端点击按钮复制文本

前端H5移动端点击按钮复制邀请码。

20180601160916210.png
使用开源项目 clipboard.js，
官网：点击打开链接
可以通过script标签引入
也可以通过npm安装，npm install clipboard.js --save-dev。

(注:这个插件复制的对象必须是input 或者 textarea 里面的值。所以说你要是想复制p标签或者其他文本 必须先设置一个input或者textarea作为中间过渡。html中写一个textarea标签，样式设置： opacity:0; z-index=-1;这样就可使隐藏这个没用的容器。)

下面贴代码：

<div class="code-box">
      <p class="code-num" id="codeNum">AE86123456</p>
      <textarea id="input"></textarea>
      <p class="code-btn copy" id="codeBtn" data-clipboard-target="#input">复制邀请码</p>
    </div>

js代码：

$(".code-btn").click(function(){
      let e = document.getElementById("codeNum").innerText;
      let t = document.getElementById("input");
      t.value = e;
      //实例化clipboard
      var clipboard = new ClipboardJS('#codeBtn');
      clipboard.on("success", function(e){
        $(".alertMsg").html("复制成功！");
        $(".modal-bg").css("display", "block");
        e.clearSelection();
      });
      clipboard.on("error", function(e){
        $(".alertMsg").html("请选择“拷贝”进行复制!");
        $(".modal-bg").css("display", "block");
      });
    });

第二种方法:

<span id="codeNum">FTYHDSDW</span>
<span class=" code-btn" id="codeBtn" data-clipboard-target="#input">复制</span>

js

<script type="text/javascript">
  function copyArticle(event) {
        const range = document.createRange();
        range.selectNode(document.getElementById('codeNum'));
 
        const selection = window.getSelection();
        if(selection.rangeCount > 0) selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand('copy');
        alert("复制成功！");
      }
    document.getElementById('codeBtn').addEventListener('click', copyArticle, false);
    
</script>