JavaScript 复制到剪贴板：3 种实用方法

三种使用 JavaScript 将文本复制到剪贴板的方法：从古老到现代

您是否曾思考过“复制”按钮的魔法是如何运作的？点击一下——链接、代码或优惠券代码就已经在剪贴板中了。没有闪烁，没有滚动，没有多余的操作。这个看似简单的任务，却是 Stack Overflow 上最热门的问题之一。这并非偶然：用 JavaScript 实现复制到剪贴板的功能暗藏陷阱，涉及浏览器差异，并跨越了 Web 发展的三个时代。

在本文中，我们将剖析所有使用 JavaScript 将文本复制到剪贴板的方法：从古老且几乎被淘汰的 document.execCommand，到现代异步的 navigator.clipboard。您不仅将学会如何复制文本，还将了解如何安全、优雅地实现，并支持旧版浏览器。我们开始吧！

为什么复制到剪贴板并不“简单”

乍一看似乎很简单：获取文本，发送到剪贴板。但浏览器是“偏执狂”。它们不希望网站上的任何脚本能在您不知情的情况下读取或写入剪贴板。想象一下：您打开一个网站，它在后台将您复制的密码替换成“SendBitcoinToMe”。很可怕，对吧？

因此，JavaScript 有严格的规则：只有在用户主动操作（点击、按键）时才能进行复制。即使满足这个条件——也并非所有 API 的工作方式都相同。让我们来一探究竟。

方法 #1：经典方法——document.execCommand('copy')

工作原理

在过去，恐龙时代（大约 2020 年之前），将文本复制到剪贴板的唯一方法是使用 execCommand 技巧。思路很简单：

\n
• 创建一个临时的 textarea 或 input 元素。
\n
• 将所需文本放入其中。
\n
• 选中它（通过 select()）。
\n
• 调用 document.execCommand('copy')。
\n
• 删除临时元素。
\n

代码实现如下：

function copyToClipboardLegacy(text) {\n    // 创建临时元素\n    const textarea = document.createElement('textarea');\n    textarea.value = text;\n    // 使其不可见\n    textarea.style.position = 'fixed';\n    textarea.style.opacity = '0';\n    document.body.appendChild(textarea);\n    // 选中文本\n    textarea.select();\n    textarea.setSelectionRange(0, 99999); // 针对移动设备\n    // 复制\n    try {\n        const successful = document.execCommand('copy');\n        if (successful) {\n            console.log('文本已复制！');\n        } else {\n            console.error('复制失败');\n        }\n    } catch (err) {\n        console.error('复制错误：', err);\n    }\n    // 清理\n    document.body.removeChild(textarea);\n}

优点和缺点

优点：甚至在 Internet Explorer 9 中也能工作。无需权限。

缺点：已被视为过时（deprecated）。同步操作——复制时会阻塞主线程。复制大量数据不方便。最重要的是，在现代浏览器中随时可能被移除。

建议：如果您在编写新项目——不要使用 execCommand。但对于支持非常旧的浏览器（IE11、旧版 Edge），这是唯一的选择。

方法 #2：现代方法——Clipboard API (navigator.clipboard)

工作原理

替代临时方案的是 Clipboard API——异步、安全且灵活。它存在于 navigator.clipboard 对象中，不仅可以写入，还可以（在用户许可下）从剪贴板读取。

复制使用 writeText() 方法：

async function copyToClipboardModern(text) {\n    try {\n        await navigator.clipboard.writeText(text);\n        console