前端无法真正防止密码被复制，只能通过事件拦截（copy/cut/paste/selectstart）和文案提示降低误操作概率；所有前端防护均可被绕过，value在devtools中始终可见。
前端无法真正“防止”密码被复制，只能拦截常规操作路径；所有防护都可被绕过，value属性在 DevTools 里始终可见——这不是安全机制，是防误提示层。
oncopy/oncut/onpaste 内联属性在 iOS Safari 中完全失效
写 oncopy="return false" 这类内联事件，在 iOS Safari 和多数 Android WebView 里压根不触发，连 console.log 都不会执行。必须用 addEventListener 绑定才能进入 JS 上下文。
- ✅ 正确做法：
pwd.addEventListener('copy', e => e.preventDefault()) - ❌ 错误写法：
<input type="password" oncopy="return false"> - 移动端需同时监听
cut和paste，仅绑copy不够 - 别漏掉
selectstart：它控制光标能否定位，不拦它，用户仍可拖选后右键复制
user-select: none 会破坏 iOS 软键盘唤起
给 <input> 加 user-select: none（含 -webkit-user-select 等前缀），会导致 iOS 上无法聚焦、软键盘不弹出——因为该样式禁的是“光标定位能力”，不是剪切行为本身。
- ⚠️ 千万别对密码输入框设
user-select: none - 若真要视觉防选，只作用于周边文案或容器，避开
input元素本身 - 替代方案：用
addEventListener('selectstart', e => e.preventDefault())拦截事件，不影响焦点逻辑
autocomplete="off" 和 readonly 都不是防复制手段
autocomplete="off" 只影响浏览器自动填充建议，和剪切粘贴无关；readonly 会让输入框失去交互能力，软键盘不弹、无法输入，且用户删掉属性就立刻恢复——这不是防护，是自废功能。
- ✅ 防误提示应靠文案：“请手动输入密码” + 事件拦截
- ❌ 别用
readonly挡剪切，它破坏可用性且毫无防护价值 -
autocomplete="new-password"是更合理的取值，用于提示浏览器勿填充已有密码
实时过滤非法字符时，光标位置容易错乱
监听 input 事件做字符清洗（如删掉特殊符号）时，若直接改 e.target.value，光标会跳到末尾，体验极差。必须手动保存并重置 selectionStart。
- 关键步骤：先记
pos = e.target.selectionStart，再e.target.value = cleaned，最后调e.target.setSelectionRange() - 别用
keypress：它捕获不了粘贴、IME 输入、右键粘贴等主流绕过方式 - pattern 属性只在表单 submit 时校验，不阻止输入，不能替代 JS 实时过滤
最常被忽略的一点：哪怕你绑了全部事件、清了所有非法字符、还加了眼睛图标切换，用户打开 DevTools 一行 document.getElementById('pwd').value 就拿到明文——前端防复制，从来就不是为对抗恶意，而是降低普通用户的误操作概率。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
