JavaScript可通过监听copy/cut/paste事件并调用preventDefault()拦截默认行为，利用clipboardData读写剪贴板数据；需用户手势触发，推荐优先使用需HTTPS和授权的navigator.clipboard异步API。
JavaScript 中可以通过监听剪贴板相关事件（copy、cut、paste）并在事件处理函数中调用 event.preventDefault() 来拦截默认行为，再通过 event.clipboardData 读写数据，实现自定义复制粘贴逻辑。
监听并拦截 copy/cut 事件，自定义复制内容
在 copy 或 cut 事件中，你可以阻止浏览器默认复制选中内容，并手动设置要写入剪贴板的文本或 HTML：
- 必须在事件处理函数中调用
event.preventDefault()，否则无法修改clipboardData - 使用
event.clipboardData.setData(type, data)写入指定格式的数据，常用类型有"text/plain"和"text/html" - 推荐在
document或具体目标元素上添加监听器，避免全局污染
示例：复制时自动添加版权水印
document.addEventListener('copy', (e) => {
const selection = window.getSelection();
const text = selection.toString().trim();
if (!text) return;
e.preventDefault();
const watermark = `${text} —— 来源：我的网站`;
e.clipboardData.setData('text/plain', watermark);
});
监听 paste 事件，读取并过滤粘贴内容
paste 事件触发时，可通过 event.clipboardData 获取用户粘贴的数据，进行清洗、转换或拒绝：
立即学习“Java免费学习笔记（深入）”；
- 同样需先调用
e.preventDefault()才能安全访问clipboardData - 用
e.clipboardData.getData('text/plain')或'text/html'读取对应格式内容 - 可结合正则、DOMParser 等对 HTML 做净化（如移除 script 标签、限制样式）
- 处理完后，可将清洗后的内容插入到目标位置（如
document.execCommand已废弃，推荐操作 DOM）
示例：粘贴时只允许纯文本，自动过滤 HTML 标签
document.addEventListener('paste', (e) => {
e.preventDefault();
const plainText = e.clipboardData.getData('text/plain');
// 插入到当前焦点元素（简单场景）
const activeEl = document.activeElement;
if (activeEl && activeEl.tagName === 'INPUT') {
activeEl.value += plainText;
}
});
注意兼容性与权限要求
现代浏览器基本支持，但有关键限制：
- 非用户手势触发（如 setTimeout 中）的剪贴板写入会失败，必须由用户交互（click、keydown 等）触发
- 部分浏览器（如 Safari）对
clipboardData的访问更严格，推荐优先使用异步 APInavigator.clipboard -
navigator.clipboard.writeText()/.readText()更安全，但需要 HTTPS 或 localhost 环境，且需用户授权（首次调用会弹出权限提示）
补充：若需更高控制力，可用 navigator.clipboard 替代事件中的 clipboardData，例如在按钮点击时复制：
button.addEventListener('click', async () => {
try {
await navigator.clipboard.writeText('自定义内容');
} catch (err) {
console.error('复制失败:', err);
}
});
实际应用中的常见技巧
提升体验和健壮性的小建议：
- 对富文本粘贴，可用
DOMParser解析text/html，提取纯文本或白名单标签 - 在
contenteditable区域处理粘贴时，可先preventDefault，再用document.execCommand('insertHTML', false, cleanHtml)（旧 API）或更现代的insertNode/range.insertNode - 为防止重复绑定，建议使用
{ once: true }或手动管理事件监听器生命周期 - 移动端需额外测试，部分 Android 浏览器对
paste事件支持有限，可降级为监听input+ 检测粘贴特征（如连续插入大量字符）
