JavaScript剪贴板操作分两类：监听copy事件可拦截用户复制并修改内容，需preventDefault()和clipboardData；主动调用navigator.clipboard.writeText()实现一键复制，须HTTPS、用户手势且返回Promise。
JavaScript 处理剪贴板复制事件，核心在于两类机制：监听原生 copy 事件 和 主动调用 navigator.clipboard.writeText()。两者用途不同、触发条件不同、兼容性也不同，不能混用。
监听 copy 事件：拦截或定制用户复制行为
当用户手动选中文本并按下 Ctrl+C（或右键→复制）时，浏览器会触发 `copy` 事件。你可以监听它，修改实际写入剪贴板的内容，甚至阻止默认行为。关键点：
- 事件对象有 event.clipboardData，可用
setData('text/plain', '自定义文本')替换原始内容 - 必须调用 event.preventDefault()，否则你的 setData 不生效
- 只对可编辑元素（如
input、textarea）或全局document有效；普通 div 需设contenteditable="true" - 不依赖 HTTPS 或用户手势，但仅限纯文本、HTML、图片等有限 MIME 类型
示例：在页面任意位置复制时自动添加版权信息
document.addEventListener('copy', e => {
const selection = window.getSelection();
const originalText = selection.toString().trim();
if (originalText) {
e.preventDefault();
e.clipboardData.setData('text/plain', `${originalText}\n—— 来源：your-site.com`);
}
});主动写入剪贴板：实现“一键复制”功能
这不是监听用户动作，而是由脚本在用户点击按钮等交互后，把指定内容写进系统剪贴板。必须满足三个前提：
立即学习“Java免费学习笔记（深入）”；
- 页面运行在 HTTPS 或 localhost（安全上下文）
- 调用发生在 用户手势内（如 click、keydown），不能在定时器或异步回调里直接调用
- 现代浏览器支持 navigator.clipboard.writeText()，返回 Promise
示例：点击按钮复制 API 密钥
copyBtn.addEventListener('click', async () => {
try {
await navigator.clipboard.writeText('sk_live_abc123...');
console.log('已复制');
} catch (err) {
console.error('复制失败：', err.name); // 可能是 "NotAllowedError" 或 "SecurityError"
}
});兼容旧浏览器的降级方案
IE 或部分安卓 WebView 不支持 `navigator.clipboard`，需回退到 `document.execCommand('copy')`：做法是创建临时 `
- 动态插入隐藏的 `
- 调用
document.execCommand('copy') - 立即移除该元素，避免页面残留
- 注意：此方式只能复制已选中的内容，无法自由写入任意字符串
权限与错误处理不能跳过
即使环境合规，仍可能因用户拒绝权限而失败。建议：
- 用
navigator.permissions.query({ name: 'clipboard-write' })提前检查状态 - 捕获 Promise 的 reject，提示用户“请允许剪贴板访问”或“请刷新重试”
- 移动端（尤其 iOS Safari）对
readText()支持弱，复制比读取更可靠
不复杂但容易忽略。
