js实现复制的功能实现

使用document.execCommand方法（已废弃但部分浏览器仍支持）

通过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环境或localhost。返回Promise对象，可处理成功/失败状态。

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

兼容性处理方案

结合两种方法实现跨浏览器兼容，优先使用Clipboard API，失败时回退到execCommand。

async function copyText(text) {
  if (navigator.clipboard) {
    try {
      await navigator.clipboard.writeText(text);
      return;
    } 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');
  } catch (err) {
    console.error('execCommand失败:', err);
  } finally {
    document.body.removeChild(textarea);
  }
}

复制DOM元素内容

需要获取特定DOM元素的文本内容时，可通过textContent或innerText提取。

function copyElementContent(elementId) {
  const element = document.getElementById(elementId);
  if (element) {
    copyText(element.textContent || element.innerText);
  }
}

添加用户反馈

复制操作完成后建议提供视觉反馈，例如显示提示信息或动画效果。

async function copyWithFeedback(text, feedbackElement) {
  await copyText(text);
  if (feedbackElement) {
    feedbackElement.style.display = 'block';
    setTimeout(() => {
      feedbackElement.style.display = 'none';
    }, 2000);
  }
}

权限处理

某些浏览器可能需要请求剪贴板写入权限，可通过Permissions API查询。

async function checkClipboardPermission() {
  const result = await navigator.permissions.query({
    name: 'clipboard-write'
  });
  return result.state === 'granted';
}