<input type="password"> 明文可见主因是 CSS 覆盖了 -webkit-text-security 属性；React 受控组件需同步 value 与 state 并节流校验；iOS Safari 应用 autocomplete="new-password" 等组合属性防填充错位；前端隐藏无传输保护，必须 HTTPS + 服务端即时哈希。
HTML 中 <input type="password"> 为什么有时不隐藏字符
多数情况下，<input type="password"> 能正常显示圆点或星号，但如果你发现输入内容仍明文可见，大概率是被 CSS 强制覆盖了默认样式。常见原因是全局样式里写了 input { text-security: none !important; } 或 -webkit-text-security: none !important; —— 这会直接禁用密码掩码。
解决方法很简单：在密码输入框上显式重置该属性：
input[type="password"] {
-webkit-text-security: disc;
text-security: disc;
}
注意：text-security 是非标准属性（仅 Safari/Chrome 支持），而 -webkit-text-security 是实际生效的前缀版本；Firefox 不支持该机制，但它原生支持 type="password"，无需额外处理。
React 里用 useState 管理密码输入时的典型陷阱
很多人写 <input type="password" value={pwd} onChange={(e) => setPwd(e.target.value)} /> 后发现输入卡顿、光标乱跳，本质是受控组件没处理好「值同步节奏」——尤其当密码字段参与表单校验（比如实时检测长度、特殊字符）并触发频繁 re-render 时，DOM 和 state 容易脱节。
建议做法：
- 确保
value始终与 state 严格一致，避免混用defaultValue - 校验逻辑尽量节流（如用
useEffect+setTimeout延迟触发），不要在onChange里直接调用 heavy 函数 - 若需兼容旧版 React（18 之前），注意
input的value不能为null或undefined，否则会变只读
移动端 iOS Safari 输入密码时自动填充错位或弹出明文键盘
iOS Safari 对 type="password" 的自动填充行为比较激进，有时会无视 autocomplete="off"，甚至把用户名字段的值填进密码框。更麻烦的是，某些机型在聚焦密码输入框时会短暂闪现明文（尤其配合 inputmode="text" 时）。
稳定写法要组合三个关键属性：
<input type="password" autocomplete="new-password" inputmode="text" autocapitalize="none" spellcheck="false" />
其中 autocomplete="new-password" 是重点：它明确告诉浏览器“这是新密码，别从已有凭据里填”，比 "off" 更可靠；inputmode="text" 防止系统误判为数字键盘；后两者则关闭干扰性 UI 行为。
服务端接收密码前必须忽略前端所有「隐藏」逻辑
前端的 type="password" 只影响渲染，对传输毫无保护作用。HTTP 明文提交、控制台打印 event.target.value、甚至 DevTools 的 Network 面板都能直接看到原始密码。
真正有效的防护只有两条：
- 强制走 HTTPS，确保传输层加密
- 服务端收到后立刻哈希（如
bcrypt或Argon2），绝不存明文、不打日志、不透出到错误响应中
另外提醒：别在 URL 参数、localStorage 或 console.log 里碰密码变量，这些地方比输入框本身更容易泄露。
