如何用Clipboard API复制文本？

在网页开发中，复制文本是一个常见需求。现代浏览器提供了Clipboard API，可以通过JavaScript异步地将文本写入系统剪贴板，取代了旧的execCommand方式。

什么是Clipboard API

Clipboard API是一组用于访问系统剪贴板的接口，主要通过navigator.clipboard对象暴露。它包含writeText和readText等方法，全部返回Promise，需要在安全上下文（通常是HTTPS）中使用。

如何使用writeText复制文本

最简单的复制文本方式是调用navigator.clipboard.writeText方法，并传入要复制的字符串。以下示例在点击按钮后将一段文字复制到剪贴板：

// 获取按钮和提示元素
const btn = document.querySelector('#copyBtn');
const tip = document.querySelector('#tip');

btn.addEventListener('click', async () => {
  const text = '这是要复制的文本内容';
  try {
    // 调用Clipboard API写入文本
    await navigator.clipboard.writeText(text);
    tip.textContent = '复制成功';
  } catch (err) {
    // 捕获异常，例如用户拒绝授权
    tip.textContent = '复制失败：' + err.message;
  }
});

处理浏览器兼容性

虽然主流浏览器已支持Clipboard API，但在不支持的环境中应提供降级方案。可以通过判断navigator.clipboard是否存在来决定使用新方法还是旧方法：

async function copyText(text) {
  if (navigator.clipboard && window.isSecureContext) {
    // 使用现代Clipboard API
    return navigator.clipboard.writeText(text);
  } else {
    // 降级：使用textarea和execCommand
    const ta = document.createElement('textarea');
    ta.value = text;
    document.body.appendChild(ta);
    ta.select();
    document.execCommand('copy');
    document.body.removeChild(ta);
  }
}

注意事项

• Clipboard API只能在HTTPS或localhost环境下使用。
• 部分浏览器会要求页面处于焦点状态且由用户手势触发。
• 若用户禁止了剪贴板权限，writeText会抛出错误，需用try catch处理。

通过上述方式，开发者可以稳健地用Clipboard API复制文本，提升交互体验。

Clipboard_APIJavaScript文本复制修改时间：2026-07-31 02:45:15