当前位置：首页 > JavaScript

js实现复制到剪贴板

2026-02-28 18:17:14JavaScript

原生 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 的降级方案

js实现复制到剪贴板

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);
}