旧项目升级HTML5密码功能的核心问题是用户无法输入密码，主因是input[type="password"]行为变化、自动填充策略收紧及旧JS框架事件拦截失效；Chrome86+无视autocomplete="off"，应改用"new-password"或"current-password"；须监听input事件而非仅key事件；密码可见性切换应避免直接修改type，推荐双input叠加方案。
旧项目升级 HTML5 密码相关功能，核心问题不是“能不能用”，而是“用了之后用户输不了密码”——多数故障源于 input[type="password"] 的行为变化、自动填充策略收紧、以及旧 JS 框架对表单事件的拦截失效。
Chrome/Firefox 对 autocomplete 的强制干预
新版浏览器（尤其 Chrome 86+）会无视 autocomplete="off"，强行触发密码管理器自动填充。这不是 bug，是 W3C 和浏览器厂商联合推动的安全策略。
- 真正有效的写法是：
autocomplete="new-password"（用于注册/改密页），或autocomplete="current-password"（用于登录页） - 若旧项目用 JS 动态设置
type="password"（比如先显示明文再切换），必须在 DOM 插入后立即设autocomplete，否则浏览器可能已按初始值（如type="text"）完成自动填充判定 - 避免用
autocomplete="false"或空字符串——这些被视作无效值，浏览器降级为默认策略
input[type="password"] 的事件监听失效
老项目常用 onkeypress/onkeyup 监听密码输入，但在现代浏览器中，密码字段的剪贴板粘贴、密码管理器填充、甚至部分 IME 输入，都可能绕过这些事件。
- 必须同时监听
input事件（它捕获所有值变更，包括粘贴和自动填充） - 避免依赖
keydown判断回车提交——密码管理器填充后焦点未移出时，keydown不一定触发 - 如果用了 Vue/React 等框架，确认
v-model或value + onChange绑定是否覆盖了自动填充后的状态更新（常见于未初始化value或未处理onInput）
密码可见性切换按钮的兼容性陷阱
很多老项目用自定义图标 + JS 切换 type，但直接改 input.type 在 Safari 15.4+ 和部分 Android WebView 中会清空输入框。
立即学习“前端免费学习笔记（深入）”；
- 安全做法：不修改
type，而用两个input元素（type="password"和type="text"）叠加，通过visibility: hidden或z-index控制显示 - 若坚持切
type，需在切换前缓存input.value，切换后再恢复（注意：Safari 中设type="text"后立即读value可能为空，建议加setTimeout微任务延迟） - 确保切换按钮有
aria-label（如aria-label="显示密码"），否则无障碍访问失败
最易被忽略的一点：旧项目常把密码字段包裹在 form 外或用 display: none 隐藏，这会导致 Chrome 认为该字段“不可见”，拒绝触发密码保存提示——哪怕它实际是可交互的。检查 DOM 结构和 CSS 可见性计算逻辑比调 JS 更优先。
