必须用<input type="password">而非JS模拟，因其提供原生遮掩、语义声明、密码管理器识别及无障碍支持；JS模拟会导致明文暴露、无障碍失效、密码管理器失灵及移动端键盘异常。
直接用 <input type="password"> 就行，别写 type="text" 再用 JS 遮掩——那不是密码框，是安全隐患。
为什么必须用 type="password" 而不是 JS 模拟
浏览器对 type="password" 有原生支持：自动遮掩字符、禁用文本选中（部分旧 Safari 除外）、向屏幕阅读器声明语义、配合密码管理器正确识别字段。而用 type="text" + JS 替换 DOM 或监听输入再改显示，会导致：
- DOM 中明文可见，开发者工具里
input.value一眼可读 - 无障碍支持失效，视障用户无法得知这是密码字段
- 密码管理器无法识别，用户可能被迫手输弱密码
- 移动端软键盘行为不可控（比如弹出数字键盘而非全键盘）
name 和 autocomplete 怎么设才不踩坑
name 属性必须存在，否则表单提交时该字段根本不会发到后端；autocomplete 则不能简单写 off——现代浏览器（Chrome 86+、Edge 90+、Firefox 90+）基本忽略它，尤其当页面同时有 type="email" 或用户名字段时。
- 设为
autocomplete="current-password"表示“当前账户的旧密码”，用于修改密码页 - 设为
autocomplete="new-password"是提示浏览器“这是新密码，请勿用历史记录填充” - 设为
autocomplete="confirm-password"可绕过多数密码管理器自动填充（如二次确认密码框） - 绝对不要写
value="123456"，哪怕只是占位——明文会留在 HTML 源码里
移动端软键盘和“显示密码”按钮怎么处理
iOS Safari 和 Android Chrome 对 type="password" 默认倾向弹出数字/符号键盘，体验割裂。根源常是缺失 inputmode 和 autocapitalize 声明：
立即学习“前端免费学习笔记（深入）”；
- 加
inputmode="text"强制唤起全键盘（含大小写切换） - 加
autocapitalize="none"防止首字母自动大写（密码通常区分大小写） - “显示密码”按钮切换本质是动态改
input.type：从"password"切到"text"，再切回来；不要 clone 节点或替换 DOM - 切换后务必调用
input.focus()，否则焦点丢失，用户需再点一次输入框
前端验证能信多少？required 和 pattern 的真实作用
required 只在用户点击 <button type="submit"> 或回车时触发，blur 失焦不会校验；pattern 的正则不支持标志（如 /i），大小写得写成 [A-Za-z]。更重要的是：
- 用户禁用 JS、绕过表单、用 curl 直接 POST，所有前端限制都无效
- 浏览器对自动填充的密码可能跳过
required校验（已知行为，非 bug） -
title属性是唯一能自定义提示文案的地方，但只在 hover 时显示，移动端几乎不可见
required 和 pattern 仅提升体验，服务端必须重新校验空值、长度、格式
真正容易被忽略的点是：密码框的安全性不取决于你写了多少属性，而取决于你是否坚持 HTTPS 传输、服务端是否用 bcrypt/Argon2 哈希存储、以及有没有在控制台误打 input.value。其他都是锦上添花。
