当前位置：首页 > JavaScript

js实现复制到剪贴板

2026-01-13 13:50:28JavaScript

使用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，需要处理权限问题：

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('Text copied to clipboard');
  } catch (err) {
    console.error('Failed to copy:', err);
  }
}

兼容性处理方案

结合两种方法实现最大兼容性：

async function copyToClipboard(text) {
  if (navigator.clipboard) {
    try {
      await navigator.clipboard.writeText(text);
      return;
    } catch (err) {
      console.warn('Clipboard API failed, falling back');
    }
  }

  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('Fallback copy failed:', err);
  } finally {
    document.body.removeChild(textarea);
  }
}

处理用户交互限制

浏览器通常要求复制操作由用户手势触发：

button.addEventListener('click', () => {
  copyToClipboard('要复制的文本');
});

反馈优化

添加视觉反馈提升用户体验：

async function copyWithFeedback(text, button) {
  const originalText = button.textContent;
  try {
    await copyToClipboard(text);
    button.textContent = 'Copied!';
    setTimeout(() => {
      button.textContent = originalText;
    }, 2000);
  } catch {
    button.textContent = 'Failed';
    setTimeout(() => {
      button.textContent = originalText;
    }, 2000);
  }
}

js实现复制到剪贴板