js实现复制

使用document.execCommand方法

在较旧的浏览器中，可以使用document.execCommand('copy')实现复制功能。创建一个临时的textarea或input元素，将需要复制的文本赋值给它，选中文本后执行复制命令。

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。通过navigator.clipboard.writeText()方法可以更安全地实现复制功能。

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);
  }
}

处理权限问题

使用Clipboard API时需要注意权限问题。在安全上下文(HTTPS)中才能正常工作，某些浏览器可能需要用户手势触发。

button.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText('Text to copy');
    alert('Copied successfully!');
  } catch {
    alert('Copy failed. Please check browser permissions.');
  }
});

兼容性处理

为了兼容新旧浏览器，可以结合两种方法实现复制功能。

async function copyText(text) {
  if (navigator.clipboard) {
    return navigator.clipboard.writeText(text);
  } else {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    try {
      const successful = document.execCommand('copy');
      if (!successful) throw new Error('Copy failed');
    } finally {
      document.body.removeChild(textarea);
    }
  }
}

复制HTML内容

Clipboard API还支持复制HTML格式内容，通过ClipboardItem对象实现。

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