当前位置：首页 > JavaScript

js复制怎么实现

2026-04-07 12:06:35JavaScript

使用 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（现代推荐方式）

现代浏览器推荐使用 Clipboard API 的 writeText 方法实现复制功能。该方法更安全且支持异步操作。

js复制怎么实现

async function copyText(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('文本已复制到剪贴板');
  } catch (err) {
    console.error('复制失败:', err);
  }
}

处理用户交互限制

出于安全考虑，浏览器通常要求复制操作必须由用户手势（如点击事件）触发。直接在脚本中调用可能会失败。

document.getElementById('copyButton').addEventListener('click', async () => {
  const text = '要复制的文本';
  await copyText(text);
});

兼容性处理方案

对于需要兼容旧浏览器的场景，可以结合两种方法实现降级方案。

js复制怎么实现

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 {
      document.execCommand('copy');
      return Promise.resolve();
    } catch (err) {
      return Promise.reject(err);
    } finally {
      document.body.removeChild(textarea);
    }
  }
}

反馈用户体验

复制操作完成后，建议向用户提供视觉反馈，如显示提示信息或改变按钮状态。

const copyButton = document.getElementById('copyButton');
copyButton.addEventListener('click', async () => {
  try {
    await copyText('示例文本');
    copyButton.textContent = '已复制!';
    setTimeout(() => {
      copyButton.textContent = '复制';
    }, 2000);
  } catch (err) {
    copyButton.textContent = '复制失败';
  }
});

特殊格式内容复制

如需复制富文本或HTML内容，可以使用Clipboard API的write方法。

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

标签: js