JavaScript剪贴板操作_ClipboardAPI

Clipboard API通过navigator.clipboard提供异步读写剪贴板功能，需在安全上下文和用户交互中调用；2. 使用writeText()和readText()方法实现复制粘贴，支持Promise处理；3. 需检查clipboard-write权限，并兼容旧浏览器降级至execCommand方案。

现代浏览器提供了 Clipboard API，让 JavaScript 能更安全、便捷地读写系统剪贴板。相比过去依赖 document.execCommand('copy') 的方式，新的 API 基于 Promise，支持异步操作，也更符合权限控制规范。

基本用法：读取和写入剪贴板

Clipboard API 主要通过 navigator.clipboard 提供 read 和 write 方法。常用的是 writeText() 和 readText()。

写入剪贴板（复制）：

调用 writeText() 将文本写入剪贴板，需处理异步返回的 Promise。

navigator.clipboard.writeText("这是一段复制的内容")
  .then(() => {
    console.log("已复制到剪贴板");
  })
  .catch(err => {
    console.error("复制失败:", err);
  });
  

读取剪贴板（粘贴）：

使用 readText() 获取剪贴板中的纯文本内容。

navigator.clipboard.readText()
  .then(text => {
    console.log("剪贴板内容:", text);
  })
  .catch(err => {
    console.error("读取失败:", err);
  });
  

安全性与权限要求

出于安全考虑，Clipboard API 只能在安全上下文中使用（即 HTTPS 或 localhost），且需要用户主动触发操作（如点击按钮）才能执行读写。

部分浏览器会请求权限，可通过 Permissions API 检查或请求授权。

// 检查是否有剪贴板写权限
navigator.permissions.query({ name: "clipboard-write" }).then(result => {
  if (result.state === "granted" || result.state === "prompt") {
    // 可以安全调用 writeText
  }
});
  

兼容性与降级处理

虽然主流现代浏览器都支持 Clipboard API，但旧版本或某些移动浏览器可能不支持。建议添加 fallback 方案。

当 API 不可用时，可退回到传统的 execCommand 方法（已废弃但仍可用）。

async function copyText(text) {
  if (navigator.clipboard) {
    try {
      await navigator.clipboard.writeText(text);
      console.log("复制成功");
    } catch (err) {
      console.error("Clipboard API 复制失败", err);
      fallbackCopyText(text);
    }
  } else {
    fallbackCopyText(text);
  }
}

function fallbackCopyText(text) {
  const textarea = document.createElement("textarea");
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);
  console.log("已使用兼容方式复制");
}
  

基本上就这些。新 API 更简洁安全，推荐优先使用，同时保留兼容逻辑确保用户体验一致。注意始终在用户交互中调用，避免被浏览器拦截。