当前位置：首页 > JavaScript

js实现copy

2026-02-02 11:00:30JavaScript

使用document.execCommand方法

在JavaScript中，可以使用document.execCommand方法来实现复制功能。该方法已被标记为废弃，但在许多浏览器中仍然可用。

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来实现复制功能，这是更安全和标准的方法。

js实现copy

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', () => {
  const textToCopy = document.getElementById('textToCopy').value;
  copyText(textToCopy);
});

添加复制成功反馈

为了提高用户体验，可以在复制成功后显示提示信息。

js实现copy

function showCopiedMessage() {
  const message = document.createElement('div');
  message.textContent = 'Copied!';
  message.style.position = 'fixed';
  message.style.bottom = '20px';
  message.style.right = '20px';
  message.style.padding = '10px';
  message.style.background = '#333';
  message.style.color = '#fff';
  message.style.borderRadius = '5px';

  document.body.appendChild(message);

  setTimeout(() => {
    document.body.removeChild(message);
  }, 2000);
}

兼容性处理

对于不支持Clipboard API的旧浏览器，可以回退到execCommand方法。

async function copyText(text) {
  try {
    await navigator.clipboard.writeText(text);
    showCopiedMessage();
  } catch (err) {
    // Fallback for older browsers
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    try {
      document.execCommand('copy');
      showCopiedMessage();
    } catch (e) {
      console.error('Copy failed: ', e);
    }
    document.body.removeChild(textarea);
  }
}

复制HTML内容

如果需要复制富文本内容而不仅仅是纯文本，可以使用以下方法。

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