js实现复制到剪贴板

原生 JavaScript 实现复制到剪贴板

使用 document.execCommand 方法（兼容旧浏览器，但已逐渐被废弃）

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

现代 Clipboard API 实现

推荐使用异步 Clipboard API（需要 HTTPS 环境或 localhost）

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('复制成功');
  } catch (err) {
    console.error('复制失败:', err);
  }
}

处理权限问题

添加用户交互触发（如点击事件），避免浏览器拦截

button.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText('要复制的文本');
    alert('复制成功');
  } catch {
    alert('请手动复制');
  }
});

兼容性处理方案

结合新旧 API 的降级方案

function copyToClipboard(text) {
  if (navigator.clipboard) {
    navigator.clipboard.writeText(text).catch(() => {
      fallbackCopy(text);
    });
  } else {
    fallbackCopy(text);
  }
}

function fallbackCopy(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed';
  document.body.appendChild(textarea);
  textarea.select();

  try {
    document.execCommand('copy');
  } catch (err) {
    console.error('复制失败:', err);
  }

  document.body.removeChild(textarea);
}

注意事项

• 现代 Clipboard API 需要安全上下文（HTTPS 或 localhost）
• 某些浏览器可能要求复制操作必须由用户手势（如点击）触发
• 移动端设备可能有不同的行为表现
• 始终提供错误处理，考虑复制失败时的备选方案