必须在document.addeventlistener('copy')中同步调用e.preventdefault()、获取选中文本、用e.clipboarddata.setdata()写入带版权文本,否则版权追加无效;注意兼容性、敏感词过滤和https要求。

oncopy事件里不阻止默认行为,版权追加就无效
只要没调用 e.preventDefault(),浏览器就会按原样复制选中文本,你后续所有 clipboardData.setData() 操作都会被忽略。这是最常踩的坑——监听写了,setData 也写了,但粘贴出来还是纯文本。
必须在 oncopy 回调里同步执行三件事:
-
e.preventDefault()—— 立刻阻断默认复制流程 -
window.getSelection().toString()—— 获取当前高亮选中的文本(注意:若用户没选中任何内容,这个返回空字符串) -
e.clipboardData.setData('text/plain', newText)—— 把带版权的新文本写入剪贴板
document.addEventListener('copy') 才是唯一可靠入口
别用 oncopy="handleCopy()" 这种内联写法来处理全局版权追加。它只对绑定的那个元素生效,且无法捕获跨元素选中(比如从 <p></p> 拖到 <div> 的文字)。真正要统一拦截所有复制动作,必须用 <code>document.addEventListener('copy', handler)。
兼容性要点:
-
e.clipboardData在 Safari 旧版本或 iframe 中可能为null,务必先判空:if (e.clipboardData) { ... } - 移动端 WKWebView 基本不触发
copy事件,别把它当主力方案 - 只支持
'text/plain'和'text/html',写成'text/PLAIN'或'application/json'会静默失败
敏感数据过滤必须在 copy 事件里做,不能靠后端
用户复制时,敏感词(比如手机号、邮箱、内部 ID)已经出现在选区里了,这时候再过滤才来得及。如果等粘贴时再处理,数据早就进剪贴板了。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
实操建议:
- 用正则匹配
text变量,比如/\b\d{11}\b/g检测手机号,替换为*** - 版权字符串建议固定结尾,例如
'\n\n来源:我的网站 | 未经许可不得转载',避免和正文连在一起难读 - 不要在
setTimeout或fetch.then里调setData—— 脱离用户手势上下文会失败
HTTPS 或 localhost 是 navigator.clipboard.writeText 的硬门槛
如果你改用现代 API navigator.clipboard.writeText(),它比 e.clipboardData.setData() 更干净,但要求更严:必须跑在 HTTPS 页面或 http://localhost 下,否则直接报错 "NotAllowedError"。
降级逻辑不能省:
- 先判断
navigator.clipboard是否存在且可用 - 失败时 fallback 到
textarea+select()+document.execCommand('copy')(尽管已废弃,但 IE11 和部分老 Safari 还依赖它) - 注意
execCommand必须让textarea先focus()再select(),否则在某些 Android 浏览器里不生效
真正容易被忽略的是:哪怕你写了完整降级链,如果用户在非 HTTPS 环境下打开页面,navigator.clipboard 就根本不会暴露,连 try/catch 都捕获不到 —— 这时候只能靠 e.clipboardData 分支兜底。










