旧项目升级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 输入,都可能绕过这些事件。