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

方案一：

最近做手机端H5网页里面有个活动：点击按钮复制邀请码。查过一些方法，在电脑端可以复制粘贴，一放在手机上面打开网页就不能复制粘贴了。

直接进入正题

使用开源项目 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");
          });
        });

总结项目中实际遇到的问题：

    刚开始查资料用的实例方法是   

var clipboard = new Clipboard('#codeBtn');

然后控制台会报错  Uncaught TypeError: Illegal constructor

然后查了看了官方代码后，貌似v2.0 以后不能用这个方法实例化了，必须给后面加个大写的JS。

新的实例化方法

var clipboard = new ClipboardJS('#codeBtn');
原文：https://blog.csdn.net/qq_35164962/article/details/80539197

方案二

1、在做点击按钮复制功能时遇到了小小的卡顿，此处遇到了两种系统手机的兼容性 / 复制后会对文本进行选中 / 输入法弹出 等。现将方法进行总结，如下代码很好对解决了以上问题，适用性强。

2、在文本此处使用p标签或者div标签都可

<div class="fix_code">
    <p class="fix_code_title"></p>
    <div class="fix_code_content">
        <span class="gift_code" id="gift_code"></span>
    </div>
    <input class="copy-btn" id="codeBtn" type="button"/>
    <div class="fix_code_rule">
        <p>
            <b>礼包码激活方式：</b>点击游戏界面福利按钮，找到礼包码兑换并输入礼包码即可兑换奖励。
        </p>
        <p><b>礼包码激活截止时间：</b>2019年4月5日24点</p>
    </div>
</div>
// 复制
    function copyArticle(event) {
        const range = document.createRange();
        range.selectNode(document.getElementById('gift_code'));

        const selection = window.getSelection();
        if(selection.rangeCount > 0)
            selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand('copy');
        alert('复制成功');
    }
    document.getElementById('codeBtn').addEventListener('click', copyArticle, false);

参考：https://blog.csdn.net/cxwtsh123/article/details/80974904