H5移动端实现一键复制或长摁复制

今天接到了一个新的需求，要求我们对表单中的某一个字段进行复制，这个表单是不可选的，拿到需求的时候有点懵，不清楚下手点在哪，后来网上找了找，终于有了点眉目，感觉网上有些是实现不了的，特地在这里记录下进行总结

实现复制功能，因为需求没有明确提出是要一键复制，还是长摁复制，所以把两种都讲了吧

正常来说一键复制只需要在onclick事件即可，但是因为我的表单是disabled状态的，他没办法执行onclick

所以走了捷径，直接用 ontouchstart 如果要长摁，就加入一个定时器就好了

直接上代码吧

  const copy = document.getElementById('text-surveyPreRequirementCode')

  if (copy) {
    copy.ontouchstart = function () {
      CopyId(copy)//此处可以加入定时器来设置他是点击事件还是长摁事件，如你们的表单不是disabled，就直接用onclick
    }
  }

  const CopyId = async (copyDOM: any) => {
    console.log(copyDOM.textContent);
    try {
      const clipboardObj = navigator.clipboard;
      await clipboardObj.writeText(copyDOM.textContent)
      Toast.info('复制成功')
    } catch (error) {
      Toast.info(`错误,${error}`)
    }
  }

看了网上的博客，大家的做法大多是用

document.execCommand("copy") 

贴一下别人的代码

CopyOrderSerialId() {
              var system = navigator.userAgent;//获取系统信息
              //苹果
              if (system.match(/(iPhone|iPod|iPad);?/i)) {
               window.getSelection().removeAllRanges();   //将页面所有的文本区域都从选区中移除
              var copyDOM = document.getElementById("orderId-copy"); //要复制文字的节点
              var range = document.createRange();
              // 选中需要复制的节点
              range.selectNode(copyDOM);
              // 执行选中元素
              window.getSelection().addRange(range);
              // 执行 copy 操作
              var successful = document.execCommand('copy');
              try {
              var msg = successful ? '成功' : '失败';
                this.$toast("复制"+msg );
              } catch (err) {
                // this.$toast("复制失败,请从事");
              }
              // 移除选中的元素
              window.getSelection().removeAllRanges();
              }
              // 安卓
              if (system.indexOf('Android') > -1) {
                var orderUrl = this.orderData.OrderSerialId;// 获取订单号
                var newInput = document.createElement("input");// 这里的逻辑就是新建立一个input标签，
                newInput.value = orderUrl +'';// 把订单号设置为input的value值
                document.body.appendChild(newInput);// 把input添加到body中
                newInput.select(); // select 选中input里面的所有文本内容
                document.execCommand("Copy"); // 执行浏览器复制命令
                document.body.removeChild(newInput);   // 最近需要销毁
                this.$toast("复制成功");//调用引入的轻提示插件告诉用户复制成功
              }
          },
————————————————
版权声明：本文为CSDN博主「无所事事的小老弟」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/fengkui347235/article/details/103906709

在用 document.execCommand("Copy") 会有一个很大的坑：他没办法异步！！！

无法异步，意味着你ajax请求的数据是无法复制的，我们都知道ajax是异步请求的，而document.execCommand("Copy")没办法异步执行，因此无法及时的复制文本

document.execCommand()这个api只能在真正的用户操作之后才能被触发，是为了安全考虑。原理大致是这样的，当用户操作之后，chrome会将当前作用域下的userAction变量置为True（编的变量名），然后执行execCommand时就会去读取这个变量，当为True的时候才可以执行。

因为ajax基本都是异步请求，而异步请求不同于同步请求的地方就在于重新创建了一个作用域去执行回调函数。

所以在重新创建一个作用域之后，之前作用域内的userAction就失效了，当前作用域下的userAction为false，所以复制不成功。

解决办法

1. 用真正的用户操作去执行execCommand。（可能需要修改交互流程）
2. 将异步请求改成同步请求。这样做就不会创建新的作用域，execCommand命令依旧在userAction为true的上下文下执行。（当然这种做法也不是很推荐，但为了满足需求只能这样做，只要把xhr.open里的最后一个参数改为false即可满足同步请求）

不过说真的，无法理解，只好另辟蹊径

这是发现了一个新的api（在阮一峰那找到的，感兴趣的建议去看看，链接：http://www.ruanyifeng.com/blog/2021/01/clipboard-api.html）

Clipboard

Clipboard API 是下一代的剪贴板操作方法，比传统的document.execCommand()方法更强大、更合理。

它的所有操作都是异步的，返回 Promise 对象，不会造成页面卡顿。而且，它可以将任意内容（比如图片）放入剪贴板。

navigator.clipboard属性返回 Clipboard 对象，所有操作都通过这个对象进行。

在这里我就只介绍我用的方法吧

Clipboard.writeText()

Clipboard.writeText()方法用于将文本内容写入剪贴板。这样子你就可以粘贴了

使用这个办法，异步的问题就解决了。

但是有一个问题就是他的兼容性有待商榷

欢迎大家多多探讨