js实现复制功能实现

使用document.execCommand方法（已废弃但兼容性好）

通过创建一个临时的textarea元素，设置其值为要复制的文本，将其添加到DOM中并选中内容，最后调用document.execCommand('copy')执行复制操作。完成后移除临时元素。

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，且要求页面处于安全上下文（HTTPS或localhost）。

async function copyText(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 (err) {
    alert('复制失败，请手动复制');
  }
});

兼容性处理方案

结合两种方法实现最佳兼容性，先尝试使用Clipboard API，失败时回退到execCommand方法。

async function copyText(text) {
  try {
    if (navigator.clipboard) {
      await navigator.clipboard.writeText(text);
    } else {
      const textarea = document.createElement('textarea');
      textarea.value = text;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
    }
    return true;
  } catch (err) {
    console.error('复制失败:', err);
    return false;
  }
}

复制富文本内容

如需复制带格式的HTML内容，可以使用Clipboard API的write方法。

async function copyHTML(html) {
  const blob = new Blob([html], { type: 'text/html' });
  const clipboardItem = new ClipboardItem({ 'text/html': blob });
  await navigator.clipboard.write([clipboardItem]);
}