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

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

直接进入正题

使用开源项目 clipborad.js，

可以通过script标签引入

也可以通过npm安装，npm install clipborad.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;
      //实例化clipborad
      var clipborad = new ClipboardJS('#codeBtn');
      clipborad.on("success", function(e){
        $(".alertMsg").html("复制成功！");
        $(".modal-bg").css("display", "block");
        e.clearSelection();
      });
      clipborad.on("error", function(e){
        $(".alertMsg").html("请选择“拷贝”进行复制!");
        $(".modal-bg").css("display", "block");
      });
    });

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

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

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

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

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

新的实例化方法

var clipborad = new ClipboardJS('#codeBtn');

OK，这个问题就解决了。

最后公司测试又提出，某些安卓手机自带的浏览器点击这个按钮并没有反应，最后本人也去试了，貌似真的没反应。最后查了一下官方文档，发现这个开源项目也存在一些缺陷，主流浏览器大都支持，并且还要高版本才行。安卓手机自带的浏览器不能实现这个问题，最后不了了之，有大手子碰到类似问题，或者已经解决了的可以来交流交流。

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

猜你喜欢