复制选中文本方法及代码示例

本文深入解析了网页中复制文本到剪贴板的技术演进与实践要点，指出已被废弃的 `document.execCommand("copy")` 因安全限制在现代浏览器中频繁失效，强调必须转向基于 Promise 的标准 API `navigator.clipboard.writeText()`——它无需模拟选区、支持纯文本直接复制，但严格依赖 HTTPS（或 localhost）、用户手势触发及显式权限授权；同时提供了兼顾兼容性的降级方案，并揭示了开发者常忽略的关键细节：如权限拒绝后不会自动恢复、跨域子帧限制、异步调用静默失败等，帮助你写出稳定、安全、全平台可用的复制功能。

document.execCommand("copy") 已被废弃，现代浏览器中无法可靠触发复制，尤其在非用户交互上下文（比如 onload 或 setTimeout）中会静默失败。别再把它当默认方案用。

为什么 document.execCommand("copy") 常常不工作

这个 API 依赖两个前提：一是必须有真实选中的 DOM 节点（window.getSelection() 非空），二是调用必须发生在用户手势（如 click、keydown）的同步执行流中。Chrome 65+、Firefox 85+ 和 Safari 15.4+ 都已限制其行为，甚至部分版本直接抛出 Uncaught DOMException: document.execCommand('copy') is not allowed to be called from cross-origin subframes 错误。

• 选区为空时调用，返回 false 且无提示
• 在 fetch 回调或 setTimeout 中调用，直接被浏览器拦截
• 目标元素设了 contenteditable="false" 或 user-select: none，会导致无法选中

用 navigator.clipboard.writeText() 替代（推荐）

这是当前标准、安全、无需选中节点的复制方式，但需 HTTPS 环境（localhost 除外）且用户已授予权限。它返回 Promise，便于处理成功/失败。

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log("已复制到剪贴板");
  } catch (err) {
    console.error("复制失败:", err.name); // 可能是 "NotAllowedError" 或 "SecurityError"
  }
}

// 绑定到按钮点击
document.getElementById("copy-btn").addEventListener("click", () => {
  copyToClipboard("Hello, world!");
});

• 不依赖 DOM 选区，纯文本即可
• 失败时明确抛出 NotAllowedError（权限未授予）或 SecurityError（非安全上下文）
• 移动端 Safari 13.1+、Chrome 66+、Firefox 63+ 全支持

兼容旧版浏览器的降级写法（仅限必要场景）

如果必须支持 IE11 或老版 Edge（navigator.clipboard 不存在），才考虑回退到 execCommand，但务必包裹在用户事件中，并手动创建临时 <textarea> 模拟选中。

function fallbackCopy(text) {
  const textarea = document.createElement("textarea");
  textarea.value = text;
  textarea.style.position = "fixed"; // 避免滚动影响
  textarea.style.left = "-999999px";
  document.body.appendChild(textarea);
  textarea.focus();
  textarea.select();

  try {
    const success = document.execCommand("copy");
    document.body.removeChild(textarea);
    return success;
  } catch (err) {
    document.body.removeChild(textarea);
    return false;
  }
}

• 必须在 click 事件内同步调用，不能异步延迟
• 临时 <textarea> 需 position: fixed 防止页面跳动
• IE11 不支持 navigator.clipboard，但接受该降级方案

真正容易被忽略的是权限模型变化：现代复制必须由用户主动触发，且 navigator.clipboard 的首次调用会弹出浏览器权限提示；一旦拒绝，后续调用会直接 reject，不会重试。别指望自动恢复——得引导用户手动在地址栏点击锁形图标授权。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《复制选中文本方法及代码示例》文章吧，也可关注golang学习网公众号了解相关技术文章。