密码框不隐藏的根源是type="password"被覆盖，需检查密码管理器、js切换残留、css禁用掩码或误用type="text"；name和autocomplete必须配对生效，推荐autocomplete="current-password"或"new-password"；显示/隐藏按钮应直接切换input.type并监听blur兜底，避免dom明文残留。
密码框不隐藏？先看 type="password" 是否被覆盖
密码框默认就隐藏，不需要额外配置——type="password" 本身就会触发浏览器原生掩码（●）。所谓“一键隐藏”，其实是防止它被意外暴露。常见失效不是因为没写对，而是被以下操作覆盖了：
• 密码管理器插件把 input.type 动态改成了 "text"
• JS 切换“显示密码”后忘记切回，input.type 滞留在 "text"
• CSS 中写了 -webkit-text-security: none 或 text-security: none（旧版 Chrome/Safari 支持，会强制关闭圆点）
• 误用 type="text" + placeholder 写“密码”，视觉无遮罩，也不被密码管理器识别
name 和 autocomplete 必须配对才真正生效
只写 type="password" 不够。两个属性缺一不可：
• name 必须存在，例如 name="password"；否则表单提交时该字段根本不会发到后端
• autocomplete 不能填 "off"——Chrome 86+、Firefox 90+、Edge 90+ 已基本无视它
• 登录页用 autocomplete="current-password"
• 注册或改密页的新密码框用 autocomplete="new-password"
• 二次确认密码框可设 autocomplete="confirm-password"，多数密码管理器会跳过自动填充
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
实现“显示/隐藏”按钮的最小可靠写法
核心是控制 input.type 切换 + 失焦兜底，避免明文长期暴露：
• 直接赋值： input.type = "text" 或 input.type = "password"，现代浏览器完全支持
• 切为 "text" 后立即调用 input.focus()，防止光标丢失
• 监听 blur 事件，一旦失焦就强制切回 "password"，防用户切走后明文挂着
• 不要用两个 input（一个 type="password" + 一个 type="text"）来回同步——DOM 多一份明文，调试时更容易泄露
别碰 display: none 或 visibility: hidden 包裹密码框
这类 CSS 隐藏方式和密码掩码无关，但会引发实际问题：
• 若用 display: none 包裹 input type="password"，该字段仍会提交，但失去语义，屏幕阅读器可能误读
• 更糟的是，配合 JS 动态控制时，容易因 DOM 更新时机导致 value 未同步
• 如果目标是“不显示、不交互、但值必须提交”，唯一合规做法是用 input type="hidden"，而不是视觉隐藏密码框
• 真正需要隐藏整块区域（比如某一行），优先用 hidden 属性，它语义明确、支持无障碍、且不会被 CSS 意外覆盖
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
