HTML中如何阻止用户复制特定元素内的文字

user-select: none 必须写全浏览器前缀才生效，需同时设置 -webkit-user-select、-moz-user-select、-ms-user-select 及标准写法；应作用于具体容器而非 body；该属性仅阻止鼠标选中，不拦截 Ctrl+C 或右键复制，且无法真正保护敏感数据。

user-select: none 必须写全浏览器前缀才生效

只在 CSS 里写 user-select: none，在旧版 Chrome、Safari 或 Firefox 中大概率无效。必须显式补全所有前缀：-webkit-user-select: none（Chrome/Safari/Edge）、-moz-user-select: none（Firefox）、-ms-user-select: none（IE/旧 Edge），再加标准写法。否则用户一拖就选中，复制照常。

别给整个 body 加，优先作用于具体容器

把防复制逻辑绑定到特定元素（比如 <div id="article-content">），而不是盲目套在 body 上。否则会误伤表单控件——input 和 textarea 即使设了 user-select: none，浏览器也会自动忽略，但视觉干扰和焦点异常仍可能发生。

1. 正确做法：给目标容器加 class 或 id，再写对应 CSS 规则
2. 错误做法：全局 body { ... }，后续还得单独给按钮、输入框重置 user-select: auto
3. 注意：该属性只阻止鼠标拖选和双击选词，不拦 Ctrl+C；用户仍可右键“复制”或通过开发者工具提取文本

监听 copy 事件时必须放过可编辑区域

直接对 document 绑 copy 并调 e.preventDefault()，会导致所有输入框无法复制粘贴，实际体验极差。关键是要识别当前焦点是否落在可交互元素上：

1. 用 document.activeElement 判断，而非 e.target——后者在点击空白处时可能误判
2. 匹配范围至少包含：input、textarea、[contenteditable="true"]
3. 移动端 Safari 对 copy 事件支持不稳定，部分机型根本不触发，不能依赖它作为唯一防线

右键拦截要保留链接和按钮的默认行为

禁用右键菜单不是目的，防止文字被“复制”才是。无差别 e.preventDefault() 会同时干掉“在新标签页打开链接”“保存图片”等合理操作，损害可访问性和 SEO。

1. 条件拦截更稳妥：只对非交互元素（如普通 p、span）禁右键
2. 放行：a、button、input、textarea、select、[contenteditable]
3. 内联写法如 oncontextmenu="return false" 已被现代框架废弃，且无法动态控制范围

真正需要警惕的是“以为防住了”这个错觉。只要内容渲染在浏览器里，用户就能通过 document.body.innerText、Elements 面板、禁用 JS 或直接查看源码拿到全部文本。防复制不是安全手段，而是提高普通用户复制门槛的辅助策略；敏感数据必须靠服务端权限控制和内容分发策略兜底。