type属性拼写错误或值不合法最常见，如tpye=”password”、type=”pasword”或未改回type=”text”，会导致明文显示；动态切换需用setAttribute设type，禁用autocomplete=”off”而用”new-password”，禁用text-security等CSS，加inputmode=”text”确保全键盘。
type属性拼写错误或值不合法
最常见却最容易被忽略：把 type="password" 写成 tpye="password"、type="pasword" 或 type="text" 后忘了改回来。浏览器直接降级为普通文本框，明文可见、无掩码、自动填充照常弹出。
- 检查控制台是否报错（虽然通常不报），但更可靠的是右键「检查元素」，确认
input标签的type属性值确实是"password" - 动态切换显示/隐藏密码时，务必在 js 中用
el.setAttribute("type", "password")回设，别只改 class 或 visibility - 不要混用
type="password"和type="text"共存于同一 dom 节点——某些旧版 ios 会卡在中间状态导致光标错位或失焦
autocomplete没关干净，密码管理器乱插手
现代 chrome/edge 默认对 type="password" 主动尝试智能填充，哪怕你没写 autocomplete，也可能在点击瞬间闪出明文建议框，甚至覆盖 placeholder。
- 必须显式声明：
autocomplete="new-password"（注册/重置页）或autocomplete="current-password"（登录页的“原密码”字段） - 绝对不要用
autocomplete="false"或autocomplete="off"—— 这俩在新版浏览器里基本失效，"off"仅对部分表单级控制有效，字段级推荐用"new-password" - 如果页面有多个密码字段（如新密码 + 确认密码），两个都得设
autocomplete="new-password"，否则第二个可能被当成“重复填同一密码”而复用建议
CSS 或 JS 意外破坏掩码效果
输入内容明明被隐藏了，但一聚焦就露馅；或者 iOS 上输完再点进去，光标跳到开头、输不进新字符——这些往往不是 html 写错了，而是样式或脚本干扰了浏览器原生行为。
- 禁用所有自定义
text-security相关 CSS：-webkit-text-security: none、text-security: disc等，它们和type="password"冲突，尤其在 safari 上表现异常 - 避免给密码框加
position: fixed或transform，iOS WebKit 在这类布局下容易丢失输入焦点或光标定位 - JS 不要监听
input事件后反复调用el.value = el.value（比如做实时格式化），这会强制重置光标位置，移动端尤为明显
移动端软键盘适配翻车
安卓输不了大写字母、iOS 弹出数字键盘却要输符号——根本原因在于浏览器对 type="password" 的默认键盘映射不统一，且不总按你预期走。
立即学习“前端免费学习笔记（深入）”；
- 必须加
inputmode="text"，强制全键盘（含大小写字母、数字、符号）；inputmode="numeric"会屏蔽字母，直接废掉大部分密码规则 - iOS 上额外加
autocapitalize="off" autocorrect="off" spellcheck="false"，防止系统强行首字母大写或拼写纠错干扰 - 别依赖
pattern或minlength来“挡住”非法输入——它们只校验提交，用户照样能输任意内容，且无法阻止粘贴明文
真正难调试的，是那些看似没报错、DOM 看着也对，但 iOS 失焦后光标回不到末尾、或者 Chrome 密码管理器在表单 submit 前 0.2 秒才弹出来盖住按钮——这些不是 bug，是浏览器安全策略的主动干预，前端只能绕，不能破。