chrome不自动填充密码框的主因是表单结构或属性不满足Autofill识别规则：需有明确账号字段、密码框设autocomplete=”current-password”、表单包裹在内、避免动态插入或隐藏。
Chrome 浏览器不自动填充 type="password" 输入框的常见原因
不是密码没保存，而是表单结构或属性不符合浏览器自动填充（Autofill）识别规则。Chrome 对 的自动填充依赖于它能否准确关联到对应的用户名/邮箱字段，且整个表单需满足基本语义化要求。
- 密码框前面必须有明确的账号类字段，如
、或带autocomplete="username"的输入框 -
autocomplete属性缺失或值错误：密码框必须写autocomplete="current-password"（登录页）或autocomplete="new-password"（注册/改密页） - 表单没有包裹在
/ - 页面加载后通过 js 动态插入密码框，或初始时
display: none/visibility: hidden，会导致 Chrome 跳过识别
html5 中正确设置自动填充的最小可行写法
以下是最简但能被 Chrome、edge 稳定触发密码自动填充的结构，无需额外 JS：
关键点：
-
name属性不能随意起名（比如name="pwd"），要使用浏览器认可的语义名，或靠autocomplete显式声明 -
autocomplete="current-password"是登录页唯一推荐值；设成"off"或空字符串会彻底禁用自动填充 - 如果账号字段是邮箱，
同样有效 - 避免给密码框加
value初始值（哪怕为空字符串），否则部分版本 Chrome 会拒绝填充
为什么加了 autocomplete 还是不填？检查这三处
即使写了 autocomplete，仍可能失败，重点排查：
立即学习“前端免费学习笔记（深入）”；
- 密码框是否在 iframe 里？ Chrome 默认不向 iframe 内表单提供密码自动填充（除非主域与 iframe 同源且显式启用）
- 页面 URL 是否含敏感协议或参数？ 如
file://协议、URL 中含#锚点后立即提交、或重定向跳转过快，都会中断填充流程 - 用户是否手动关闭过该站点的自动填充？ 可在 Chrome 地址栏点击锁形图标 → “网站设置” → 查看 “密码” 是否被禁止；或访问
chrome://settings/passwords确认对应账号已保存且未被“从列表中移除”
Vue/React 等框架中动态渲染表单的特别处理
框架组件挂载时机和 dom 可见性会影响 Chrome 填充判断。实际生效的关键不是“有没有渲染”，而是“渲染完成时密码框是否处于可交互状态”：
- 避免在
v-if/{show && }中条件渲染密码框——首次为 false 时 DOM 不存在，后续 true 时属于“动态插入”，易失败 - 改用
v-show或style={{ display: show ? 'block' : 'none' }}保持 DOM 始终存在 - 若必须动态加载，可在密码框渲染后
setTimeout(() => input.focus(), 100)触发一次 focus，有助于唤醒填充逻辑（非 100% 可靠，但实测提升成功率） - 不要用 JS 清空
value或调用input.value = ''——这会覆盖浏览器刚填入的内容
Chrome 的自动填充机制对“表单完整性”和“用户操作上下文”非常敏感，与其反复调试 autocomplete 值，不如先确保账号字段 + 密码字段 + 提交动作构成一个语义清晰、无隐藏/延迟/跨域干扰的同步表单流。