密码框未隐藏的常见原因包括CSS禁用掩码、密码管理器或JS将type改为text、误用type="text"、name或autocomplete缺失/错误；可靠显示/隐藏需切换input.type并失焦兜底，前端验证无效，关键在HTTPS传输与服务端强哈希存储。
type="password" 本身就会隐藏输入内容，不需要额外设置——浏览器原生支持圆点（●）遮罩，不是“要怎么开启隐藏”，而是“别误关它”。
为什么密码框看起来没隐藏？常见干扰源
不是 HTML 写错了，而是以下几类干扰让掩码失效：
- CSS 中写了
-webkit-text-security: none或text-security: none（旧版 Safari/Chrome 支持，会强制取消圆点） - 密码管理器插件动态改了 DOM，把
input.type从"password"覆盖成了"text" - JS 切换“显示密码”后没切回，
input.type停留在"text"状态 - 用了
type="text"却只靠 placeholder 或 label 写“密码”，视觉上没遮罩，也不被密码管理器识别
name 和 autocomplete 必须配对设对，否则提交或填充都失效
只写 type="password" 不够，两个属性缺一不可：
-
name属性必须存在，比如name="password"；否则表单提交时该字段根本不会发到后端 -
autocomplete不能填"off"——Chrome 86+、Firefox 90+、Edge 90+ 基本无视它 - 登录页密码框用
autocomplete="current-password" - 注册或改密页的新密码框用
autocomplete="new-password" - 二次确认密码框可设
autocomplete="confirm-password"，多数密码管理器会跳过自动填充
实现“显示/隐藏密码”按钮的可靠写法
核心是控制 input.type 切换 + 失焦兜底，避免明文长期暴露：
立即学习“前端免费学习笔记（深入）”；
- 切换时直接赋值：
input.type = "text"或input.type = "password"，现代浏览器已完全支持 - 切为
"text"后立即调用input.focus()，防止光标丢失 - 监听
blur事件，一旦失焦就强制切回"password"，防用户切走后明文挂着 - 不要用两个 input（一个
type="password"+ 一个type="text"）来回同步——DOM 多一份明文，调试时更容易泄露
前端验证只是体验层，服务端才是真实防线
required 和 pattern 对安全毫无加成，仅影响用户交互流程：
-
required只在点击提交按钮或回车时触发，blur不校验 -
pattern的正则不支持/i这类标志，大小写得写成[A-Za-z] - 用户禁用 JS、用
curl直接 POST、或绕过表单 DOM 修改，所有前端限制形同虚设 - 真正关键的是：HTTPS 传输 + 服务端收到明文后立刻用 bcrypt 等强哈希存储，绝不能存明文或 base64
最常被忽略的一点：开发者调试时习惯 console.log(form) 或 console.dir(input)，现代浏览器会自动展开并打印出 value 明文——这不是密码框的问题，是调试姿势问题。要验证输入，改用 input.value.length 或 input.checkValidity()。
