js实现拷贝

使用 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() 实现异步复制，需注意 HTTPS 环境或本地开发限制。

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

兼容性处理方案

结合两种方法实现降级兼容，优先使用 Clipboard API。

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

  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed';
  document.body.appendChild(textarea);
  textarea.select();
  try {
    document.execCommand('copy');
    return true;
  } catch (err) {
    console.warn('execCommand 失败:', err);
    return false;
  } finally {
    document.body.removeChild(textarea);
  }
}

扩展功能：复制 DOM 元素内容

获取指定元素的文本内容并复制。

async function copyElementText(selector) {
  const element = document.querySelector(selector);
  if (element) {
    await copyText(element.textContent || element.innerText);
  }
}

注意事项

• 现代浏览器要求 HTTPS 环境或 localhost 才能使用 Clipboard API
• 某些浏览器可能要求复制操作必须由用户手势（如点击事件）触发
• 考虑添加复制成功/失败的视觉反馈提升用户体验