前端实现文本复制

常见方法document.execCommand()（旧方法）和 Clipboard API（新方法）

一、document.execCommand()（旧方法）

这种方法兼容性较好，但已经逐渐被弃用。它的原理是创建一个临时的输入框，将需要复制的文本放入其中，选中文本后执行复制命令。

const copyButton = document.getElementById("copyButton");
const textToCopy = "这是要复制的文本内容";
copyButton.addEventListener("click", () => {
  // 创建一个临时的输入框
  const input = document.createElement("input");
  input.value = textToCopy;
  document.body.appendChild(input);
  // 选中文本
  input.select();
  input.setSelectionRange(0, input.value.length);
  // 执行复制命令
  document.execCommand("copy");
  // 移除临时输入框
  document.body.removeChild(input);
  alert("文本已复制到剪贴板");
});

二、使用 Clipboard API（新方法）

Clipboard API 是现代浏览器提供的更安全、更方便的复制粘贴解决方案。

const copyButton = document.getElementById("copyButton");
const textToCopy = "这是要复制的文本内容";
copyButton.addEventListener("click", async () => {
  try {
    // 调用 Clipboard API 进行复制
    await navigator.clipboard.writeText(textToCopy);
    alert("文本已复制到剪贴板");
  } catch (error) {
    console.error("复制失败:", error);
  }
});