前端无法真正防止文字复制，user-select: none 仅限制鼠标选中，js 拦截事件易被绕过且影响体验，敏感信息必须后端处理、前端不渲染。
直接禁用右键和复制快捷键行不通
浏览器原生不提供真正阻止文字复制的安全机制，oncopy、oncontextmenu 这类事件拦截只能干扰普通用户，无法防住开发者工具、截图、OCR 或直接读取 HTML 源码。强行加一层 JS 遮罩或覆盖 user-select: none 也容易破坏可访问性，还可能被绕过。
用 CSS 的 user-select 控制选中行为
这是最轻量、兼容性好、且不影响页面结构的做法，但仅限制鼠标拖选和双击选词：
<style>
.no-select {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
</style><p class="no-select">这段文字不能被鼠标选中</p>
-
user-select: none在现代浏览器中生效，但 Safari 旧版需-webkit-user-select - 它不影响键盘
Ctrl+A全选，也不阻止 DevTools 查看 DOM - 不要全局设置
body { user-select: none }，否则输入框、下拉框等交互元素会失效
JS 拦截 copy 和 contextmenu 事件要谨慎
可以监听并取消默认行为，但必须明确知道它的局限性和副作用：
document.addEventListener('copy', e => e.preventDefault());
document.addEventListener('contextmenu', e => e.preventDefault());
- 这两行代码会让所有复制操作（包括你自己的代码复制、调试时复制 console 输出）全部失效
- 移动端长按触发的复制/翻译菜单也会被禁用，影响用户体验
- 部分浏览器（如 Firefox）对
contextmenu事件的拦截不完全，右键仍可能呼出菜单 - 如果页面有
<textarea></textarea>或<input>，需单独放行，否则用户无法输入
真正需要保护的内容不该放在前端
如果你担心的是敏感文本（比如授权码、内部接口返回值、未脱敏数据），唯一可靠的方式是：不把它渲染到 HTML 中。让关键信息只在后端处理，前端只展示脱敏结果或占位符。
例如：****-****-****-1234 是安全的，而把完整卡号写死在 HTML 里，哪怕加了 10 层 JS 阻止，照样能被 document.body.innerText 一键提取。
防复制不是前端能兜底的事——它只是第一道视觉提示，别把它当锁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
