JS实现复制到剪贴板的几种方式
2025-12-26 22:00:51
0浏览
收藏
偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《JavaScript复制到剪贴板的几种方法》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！
最推荐方式是 navigator.clipboard.writeText()，现代浏览器均支持，需 HTTPS 或 localhost 安全上下文，必须用户触发；旧浏览器降级用 document.execCommand("copy")。
用 JavaScript 实现复制到剪贴板，最推荐、最可靠的方式是使用原生的 navigator.clipboard.writeText() API。它现代、安全、无需依赖第三方库，且支持异步操作和错误处理。
现代标准方法：navigator.clipboard.writeText()
这是目前主流浏览器（Chrome 66+、Firefox 63+、Edge 79+、Safari 13.1+）都支持的标准 API，需在安全上下文（HTTPS 或 localhost）中运行。
- 调用方式简单：
navigator.clipboard.writeText("要复制的文本") - 返回 Promise，可配合
async/await使用，便于处理成功或失败 - 需要用户主动触发（如点击事件），否则可能被浏览器拒绝（防止恶意自动复制）
示例：
async function copyToClipboard(text) {
try {
await navigator.clipboard.writeText(text);
console.log("复制成功");
} catch (err) {
console.error("复制失败：", err);
}
}
// 绑定到按钮点击
document.getElementById("copyBtn").addEventListener("click", () => {
copyToClipboard("Hello, world!");
});
兼容旧浏览器：document.execCommand("copy")
适用于 IE11、旧版 Safari 等不支持 navigator.clipboard 的环境，但已被废弃（Deprecated），仅作降级方案。
- 需先创建一个临时