HTML中如何监听剪贴板复制粘贴事件-html教程-PHP中文网

document.addeventlistener('copy')是唯一可靠入口，需同步执行event.preventdefault()、getselection().tostring()和clipboarddata.setdata('text/plain',...)三步。

html中如何监听剪贴板复制粘贴事件

oncopy/onpaste 属性能直接用，但必须 preventDefault()

直接在元素上写 oncopy="handleCopy()" 是可行的，但它只负责“听到”复制动作，不调用 event.preventDefault() 就改不了实际复制的内容。常见错误是只监听、不阻止，默认行为会覆盖你所有 setData 操作。

适用场景：快速给单个 <input> 或 <div contenteditable="true"> 加粘贴拦截；不推荐用于全局版权追加，因为无法捕获跨元素选中。 <ul> <li>内联属性只对绑定的元素生效，body 上写 <code>oncopy 不会捕获子元素选中内容

event.clipboardData 在 onpaste 里可用，但 Safari 旧版或 iframe 中可能为 null，务必先判空

移动端 WKWebView 基本不触发 oncopy/onpaste，别把它当主力方案

document.addEventListener('copy') 是唯一可靠入口

想在用户 Ctrl+C 或右键复制时统一追加版权、过滤敏感词、转义 HTML 标签，必须用 document.addEventListener('copy', handler)。这是浏览器唯一保证触发的时机，且能拿到完整选区文本。

关键三步不能少：event.preventDefault() → window.getSelection().toString() → event.clipboardData.setData('text/plain', ...)。漏掉任一，你的逻辑就白写了。

必须在事件回调里同步执行 setData，丢进 setTimeout 或 fetch.then 会失败（非用户手势上下文）
只支持 'text/plain' 和 'text/html' 这两类 MIME 类型，'application/json' 等无效
如果页面有多个 addEventListener('copy')，它们都会执行，但只有第一个调用 preventDefault() 的能生效

navigator.clipboard.readText() 需要用户手势 + HTTPS

想在粘贴时读取原始内容（比如自动识别手机号、过滤广告链接），得用 navigator.clipboard.readText()。但它不是随时能调，必须满足两个硬条件：当前上下文是用户主动触发（如点击、paste 事件内），且页面跑在 HTTPS（或 localhost）下。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

相比 event.clipboardData.getData('text/plain')，它更安全、能读取跨域粘贴内容，但兼容性差些——IE 完全不支持，老版 Safari 需降级。

不要在页面加载完就立刻调用 readText()，会报 "Permission denied"
粘贴图片要用 navigator.clipboard.read() + item.getType('image/png')，不能只认 text/plain
权限请求不是必须显式调 navigator.permissions.query()，只要在 paste 事件里调用，浏览器会自动弹授权提示

为什么 document.execCommand('copy') 已废弃还被人用

document.execCommand('copy') 能绕过部分安全限制，比如在非用户手势中强行复制（虽然 Chrome 85+ 已禁），所以有些旧项目还在用。但它没返回值、不支持异步、无法读取剪贴板，纯属历史包袱。

真正该用的是 navigator.clipboard.writeText()，它返回 Promise，可 catch 错误，也支持 write() 写入富文本或图片 Blob。不过要注意：Firefox 对 write() 支持较晚（2024 年才稳定），Safari 目前只支持 writeText()。