js 实现复制功能

使用 document.execCommand 方法

这种方法兼容性较好，但已逐渐被废弃。

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

现代浏览器推荐使用 Clipboard API。

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

处理复制按钮点击事件

为按钮添加点击事件处理程序。

document.getElementById('copyBtn').addEventListener('click', () => {
  const textToCopy = document.getElementById('textToCopy').value;
  copyText(textToCopy);
});

添加复制反馈

提供视觉反馈增强用户体验。

function showCopiedFeedback() {
  const feedback = document.createElement('div');
  feedback.textContent = 'Copied!';
  feedback.style.position = 'fixed';
  feedback.style.bottom = '20px';
  feedback.style.right = '20px';
  feedback.style.padding = '10px';
  feedback.style.background = '#333';
  feedback.style.color = '#fff';
  document.body.appendChild(feedback);

  setTimeout(() => {
    document.body.removeChild(feedback);
  }, 2000);
}

兼容性处理

结合两种方法确保最大兼容性。

async function copyText(text) {
  if (navigator.clipboard) {
    try {
      await navigator.clipboard.writeText(text);
      return true;
    } catch (err) {
      console.error('Clipboard API failed', err);
    }
  }

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

  try {
    const successful = document.execCommand('copy');
    document.body.removeChild(textarea);
    return successful;
  } catch (err) {
    document.body.removeChild(textarea);
    return false;
  }
}

处理复制权限问题

某些浏览器可能要求复制操作必须在用户交互中触发。

document.getElementById('copyBtn').addEventListener('click', async () => {
  const success = await copyText('要复制的文本');
  if (success) {
    showCopiedFeedback();
  } else {
    alert('复制失败');
  }
});