JS剪贴板操作需用户手势触发，copy/cut事件中用event.clipboardData.setData()写入自定义内容，paste事件中用getData()读取并过滤文本，现代推荐navigator.clipboard API支持文本和图片读写。
JS 中的 copy、cut、paste 是用户触发的剪贴板事件，它们本身不直接“读取”或“写入”剪贴板，而是提供拦截和干预的时机。真正读写剪贴板内容，需结合 event.clipboardData（旧 API）或 navigator.clipboard（现代 API），且必须在用户手势（如点击、按键）上下文中操作。
在 copy/cut 事件中修改要复制的内容
当用户执行复制或剪切时，copy 或 cut 事件会触发。你可以用 event.preventDefault() 阻止默认行为，再通过 event.clipboardData.setData() 写入自定义内容：
-
仅限事件处理函数内使用：必须由用户主动触发（比如点击按钮后调用
select()+document.execCommand('copy')，或监听copy事件） -
支持多种 MIME 类型：如
'text/plain'、'text/html'，可同时设置多个格式供粘贴端选择 -
示例（添加版权水印）：
document.addEventListener('copy', (e) => { e.preventDefault(); const selected = window.getSelection().toString(); const customText = `${selected}\n—— 来自我的网站`; e.clipboardData.setData('text/plain', customText); e.clipboardData.setData('text/html', `${selected}<br>—— <em>来自我的网站</em>`); });
在 paste 事件中读取并过滤粘贴内容
paste 事件发生时，可通过 event.clipboardData.getData() 获取文本内容（注意：仅限文本；图片等二进制数据需用 navigator.clipboard.read()）：
-
不能直接阻止非文本粘贴：比如用户粘贴图片，
clipboardData.getData('text/plain')返回空字符串，但事件仍会继续 - 适合做轻量清洗：例如去除富文本中的样式、自动转义 HTML、限制长度等
-
示例（只允许纯数字粘贴）：
input.addEventListener('paste', (e) => { e.preventDefault(); const text = e.clipboardData.getData('text/plain'); const digitsOnly = text.replace(/\D/g, ''); document.execCommand('insertText', false, digitsOnly); // 插入清洗后的内容 });
现代方式：用 navigator.clipboard 替代 clipboardData
推荐优先使用 navigator.clipboard（需 HTTPS 或 localhost），它更安全、功能更强，且支持图片等二进制内容：
-
写入文本：
navigator.clipboard.writeText('hello')（返回 Promise） -
读取文本：
navigator.clipboard.readText()（需用户手势触发，部分浏览器要求权限） -
读取图片：
navigator.clipboard.read()→ 解析ClipboardItem的getType('image/png') -
注意兼容性：IE 不支持；Safari 对
read()限制较严；writeText和readText在主流浏览器中已稳定
关键限制与注意事项
所有剪贴板操作都受严格安全策略约束：
-
必须由用户手势触发：不能在
setTimeout、fetch回调、load事件中直接调用，否则报NotAllowedError -
仅限安全上下文：HTTP 页面（非 localhost）无法使用
navigator.clipboard - 粘贴事件的 clipboardData 可读，但不可写：你只能从中取数据，不能用它改写即将粘贴的内容
- 避免滥用：未经提示静默修改剪贴板内容，会破坏用户预期，影响体验甚至被浏览器拦截
