js复制文本的实现

JavaScript 复制文本的实现方法

方法一：使用 document.execCommand（兼容旧浏览器）

创建一个临时 textarea 元素，将文本赋值后选中并执行复制命令。适用于较旧浏览器，但已逐渐被新 API 取代。

function copyText(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
}

方法二：使用 Clipboard API（现代浏览器推荐）

通过 navigator.clipboard.writeText 实现异步复制，更安全且支持 Promise。需注意浏览器权限限制（需用户交互触发）。

function copyText(text) {
  navigator.clipboard.writeText(text)
    .then(() => console.log('复制成功'))
    .catch(err => console.error('复制失败:', err));
}

方法三：结合两种方法的兼容方案

先尝试 Clipboard API，失败后降级到 execCommand，确保兼容性。

async function copyText(text) {
  try {
    await navigator.clipboard.writeText(text);
  } catch (err) {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
  }
}

注意事项

• 现代浏览器可能要求复制操作由用户交互（如点击事件）直接触发。
• HTTPS 环境下 Clipboard API 更可靠，部分浏览器在 HTTP 限制其使用。
• 可添加 UI 反馈（如提示“已复制”）提升用户体验。

示例：点击按钮复制

<button onclick="copyText('要复制的文本')">点击复制</button>