navigator.clipboard.writeText()是现代浏览器复制文本的首选方法，需HTTPS/localhost安全上下文及用户手势触发，Firefox 63+、Chrome 66+、Safari 13.1+支持；旧版需fallback至document.execCommand('copy')。
Clipboard API 的基本用法：navigator.clipboard.writeText() 是首选
现代浏览器中，navigator.clipboard.writeText() 是复制文本到剪贴板最直接的方式。它返回 Promise，成功时 resolve，失败时 reject（比如用户拒绝权限或上下文不安全）。
- 必须在安全上下文（HTTPS 或
localhost）中运行，否则navigator.clipboard为undefined - 只能在用户手势触发的回调中调用（如
click、keydown），否则会抛出NotAllowedError - 不支持 IE，Firefox 63+、Chrome 66+、Safari 13.1+ 支持
document.getElementById('copy-btn').addEventListener('click', async () => {
try {
await navigator.clipboard.writeText('Hello, world!');
console.log('复制成功');
} catch (err) {
console.error('复制失败:', err);
}
});
兼容旧版浏览器：document.execCommand('copy') 仍需兜底
当需要支持 Chrome 65 或 Safari 12 等老版本时，document.execCommand('copy') 是唯一选择，但它依赖临时创建并聚焦 <textarea></textarea> 元素，操作更繁琐且已被标记为废弃。
- 必须将内容写入一个
contenteditable或表单控件（如<textarea></textarea>），再选中、执行命令 - 该方法同步返回布尔值，但不提供具体错误原因；失败常因未聚焦或未选中内容
- 在无用户手势的异步回调中调用会静默失败（尤其 Safari）
function fallbackCopy(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'fixed';
textarea.style.left = '-9999px';
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;
}
}
读取剪贴板内容：navigator.clipboard.readText() 的权限与限制
读取剪贴板比写入更敏感，因此浏览器强制要求显式权限。调用 navigator.clipboard.readText() 前，最好先检查权限状态或请求权限。
-
navigator.permissions.query({ name: 'clipboard-read' })可查当前状态（granted/denied/prompt） - 首次调用
readText()会触发权限弹窗（仅限用户手势触发） - 不能读取图片或 HTML 片段（除非用
read()+ClipboardItem，但兼容性更差）
async function readFromClipboard() {
try {
const text = await navigator.clipboard.readText();
console.log('读取到:', text);
} catch (err) {
if (err.name === 'NotAllowedError') {
console.error('用户拒绝了剪贴板读取权限');
} else {
console.error('读取失败:', err);
}
}
}
常见报错和绕不过去的坑
实际开发中最容易卡在几个地方，不是代码写错，而是环境或时机不对。
立即学习“Java免费学习笔记（深入）”；
-
TypeError: navigator.clipboard is undefined→ 检查是否 HTTPS 或 localhost；HTTP 页面直接不可用 -
NotAllowedError: Write permission denied→ 调用不在用户点击等事件回调内，或页面被 iframe 沙箱隔离（需allow-scripts allow-same-origin） - 移动端 Safari 对
writeText支持不稳定，部分 iOS 15.4–15.6 版本存在 bug，可降级用execCommand回退 - 复制长文本（>1MB）在某些浏览器可能失败，无明确提示，建议截断或分块处理
真正难的不是调用哪个 API，而是判断当前环境能用哪个、用户有没有给权限、以及失败后要不要展示友好提示——这些逻辑往往比复制本身更重。
