html无法真正禁止复制，所有前端手段仅提高门槛；需兼容多浏览器前缀设置user-select，避免误拦表单元素和contenteditable，条件拦截右键，且服务端权限控制才是可靠方案。
HTML 本身没有“强制禁止复制”的能力，所有前端手段都只是提高门槛，不是真正意义上的强制。你加的任何 oncopy、user-select: none 或禁右键逻辑，用户关掉 JS、删掉样式、或直接看 document.body.innerText 就能拿到全部文字。
user-select: none 必须配全前缀才生效
只写 user-select: none 在旧版 Chrome、Safari、Firefox 里大概率无效。必须显式补全：
-
-webkit-user-select: none（Chrome/Safari/Edge） -
-moz-user-select: none（Firefox） -
-ms-user-select: none（IE/旧 Edge） -
user-select: none（标准写法，但单独用不保险）
注意：这个属性只阻止鼠标拖选和双击选词，不影响 Ctrl+C；而且如果目标元素是 <input> 或 <textarea></textarea>，浏览器会自动忽略它——这是为了保障基本可用性。
copy 事件拦截要避开表单元素
直接对 document 绑定 copy 并调用 e.preventDefault() 会导致所有输入框无法复制粘贴，实际体验极差。正确做法是过滤可编辑区域：
document.addEventListener('copy', e => {
const active = document.activeElement;
if (!active.matches('input, textarea, [contenteditable="true"]')) {
e.preventDefault();
}
});
常见错误：
- 漏判
[contenteditable="true"]，富文本编辑器就失效 - 用
e.target判断而非document.activeElement，焦点在 input 但点击了空白处时误拦 - 没处理移动端 Safari —— 它对
copy事件支持不稳定，部分机型根本不触发
contextmenu 拦截不能全局无差别禁用
右键菜单被禁后，用户无法在链接上“在新标签页打开”，也无法在图片上“查看图片”，对可访问性和 SEO 都有隐性影响。更稳妥的方式是条件拦截：
document.addEventListener('contextmenu', e => {
// 只禁非交互元素的右键
if (!e.target.matches('a, button, input, textarea, select, [contenteditable]')) {
e.preventDefault();
}
});
另外，oncontextmenu="return false" 这种内联写法已被现代框架（如 React/Vue）废弃，且无法动态控制范围，容易误伤。
真正该警惕的是“以为防住了”这个错觉
所有前端限制在以下场景都会立刻失效：
- 用户打开开发者工具 → Elements 面板里右键 → “Copy element” 或 “Copy text”
- 执行
document.body.textContent或fetch(location.href)直接拿原始 HTML - 禁用 JS 后，所有
copy/contextmenu监听器归零 - 截图 + OCR，连字体渲染差异都不用考虑
如果你的内容真需要保护，唯一可靠路径是：服务端做权限校验、敏感段落延迟加载、关键文本走 Canvas 渲染（但会影响 SEO 和屏幕阅读器）、加不可见水印、记录异常复制行为并告警——而不是指望某段 HTML 能锁死文字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
