JS 实现复制文本到剪切板（兼容不同环境）

本文同时解决了 navigator.clipboard.writeText 实现复制文本到剪切板 失效问题

---

基础实现：

js实现复制文本到剪切板我一开始的实现方法是这样的：

navigator.clipboard.writeText("要复制的文本");

在本地可以正常实现，但到测试环境等非安全域就失效了。因为navigator上并不存在clipboard属性

兼容版本：

// 复制
function copyToClipboard(textToCopy) {
  // navigator clipboard 需要在安全域（https等安全上下文）
  if (navigator.clipboard && window.isSecureContext) {
      // navigator clipboard 向剪贴板写文本
      return navigator.clipboard.writeText(textToCopy);
  } else {
      // 创建textarea
      let textArea = document.createElement("textarea");
      textArea.value = textToCopy;
      // 使textarea不在视图内
      textArea.style.position = "absolute";
      textArea.style.opacity = 0;
      textArea.style.left = "-999999px";
      textArea.style.top = "-999999px";
      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();
      return new Promise((res, rej) => {
          // 执行复制命令并移除文本框
          document.execCommand('copy') ? res() : rej();
          textArea.remove();
      });
  }
}

//调用方法
copyToClipboard("要复制的文本");

原文地址：https://blog.csdn.net/weixin_44646763/article/details/137829030

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！