前端js 复制文本到剪切板

在JavaScript中，你可以使用navigator.clipboard.writeText()方法将文字复制到剪切板。这个方法返回一个Promise，当复制操作完成时会resolve。

function copyTextToClipboard(text) {
  // 检查浏览器是否支持 Clipboard API
  if (navigator.clipboard && window.isSecureContext) {
    // 使用 Clipboard API 复制文本
    navigator.clipboard.writeText(text)
      .then(() => {
        console.log('文本已成功复制到剪贴板');
      })
      .catch(err => {
        console.error('无法复制文本: ', err);
      });
  } else {
    // 如果不支持 Clipboard API 或不是安全上下文（HTTPS），则回退到旧的方法
    fallbackCopyTextToClipboard(text);
  }
}

function fallbackCopyTextToClipboard(text) {
  // 创建一个“隐藏”的 input
  const textArea = document.createElement("textarea");
  textArea.value = text;

  // 将“隐藏”的 input 添加到文档中
  document.body.appendChild(textArea);

  // 选择并复制文本
  textArea.select();
  try {
    const successful = document.execCommand('copy');
    const msg = successful ? '成功' : '失败';
    console.log(`Fallback: 复制文本 ${msg}`);
  } catch (err) {
    console.error('Fallback: Oops, 无法执行命令', err);
  }

  // 移除“隐藏”的 input
  document.body.removeChild(textArea);
}

// 调用函数并传入想要复制的文本
copyTextToClipboard('你想要复制的文字内容');

请注意，navigator.clipboard.writeText() 方法需要在用户交互事件（如点击）的上下文中调用，而且通常只在 HTTPS 环境下可用，因为这是一个安全特性。如果你在非安全上下文中尝试使用它，可能会遇到问题或被浏览器阻止。

此外，document.execCommand('copy') 是一种较老的方式，用于在不支持现代 Clipboard API 的环境中提供向后兼容性。然而，execCommand 已经被标记为过时，应该尽可能使用 Clipboard API 替代。

该方法是AI查询的，经实际应用后好使

原文地址：https://blog.csdn.net/zbailing/article/details/145131506

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