js实现复制功能

使用 document.execCommand 方法

这种方法适用于较旧的浏览器，但在现代浏览器中可能被逐步淘汰。通过创建一个临时的 textarea 元素，将文本内容放入其中，然后执行复制命令。

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('copyButton').addEventListener('click', async () => {
  const text = document.getElementById('textToCopy').value;
  try {
    await navigator.clipboard.writeText(text);
    alert('Text copied successfully!');
  } catch (err) {
    alert('Failed to copy text: ' + err);
  }
});

兼容性处理

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

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

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

  try {
    document.execCommand('copy');
    return true;
  } catch (err) {
    console.error('Both methods failed');
    return false;
  } finally {
    document.body.removeChild(textarea);
  }
}

复制富文本内容

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

async function copyRichText(html) {
  const blob = new Blob([html], { type: 'text/html' });
  const clipboardItem = new ClipboardItem({ 'text/html': blob });

  try {
    await navigator.clipboard.write([clipboardItem]);
  } catch (err) {
    console.error('Failed to copy rich text: ', err);
  }
}