type="password"仅实现字符掩码，非安全机制；明文仍存于DOM和HTTP请求中，需HTTPS防传输泄露、后端哈希防存储泄露；autocomplete应设current-password或new-password而非off；必填name和id，否则提交失败或可访问性受损。
type="password" 只是掩码，不是安全输入
它不加密、不哈希、不防传输泄露，只做一件事：把用户输入的每个字符替换成 • 或 *。DOM 里 document.getElementById('pwd').value 仍是明文，Network 面板里 POST 请求体中 password=123456 也是明文——除非你开了 HTTPS。
常见错误现象包括：用 type="text" + CSS 遮盖文字，以为“看起来像密码框”就算安全；或误信 autocomplete="off" 能阻止密码管理器读取——现代浏览器大多忽略它，且关掉反而影响用户填新密码。
-
type="password"是语义标记，不是安全机制 - 真正防窥屏靠的是这个掩码行为，防中间人靠 HTTPS，防数据库泄露靠后端 bcrypt/Argon2 哈希
- 移动端尤其要注意：iOS Safari 会短暂显示刚按下的字符，这是正常设计，不是 bug
autocomplete 属性怎么设才靠谱
设成 autocomplete="off" 基本无效，Chrome、Firefox、Safari 都可能无视。该字段实际作用是给密码管理器发信号，告诉它是当前密码还是新密码。
使用场景明确时优先选具体值：
立即学习“前端免费学习笔记（深入）”；
- 登录页密码输入框 →
autocomplete="current-password" - 注册页或改密页的新密码框 →
autocomplete="new-password" - 确认密码框 → 同样用
autocomplete="new-password"（不是off） - 绝对不要在
type="password"上设autocomplete="on"，它会让管理器填错旧密码
参数差异：部分老浏览器对 new-password 支持不一致，但 2026 年主流版本均已支持；off 在 iOS 上可能触发键盘自动大写，反而破坏大小写敏感性。
必须加的属性有哪些，漏了会出什么问题
漏掉 name，表单提交时整个字段直接消失，后端收不到 password 参数；漏掉 id，关联的 <label for="xxx"> 失效，影响可访问性和点击聚焦体验。
其他推荐但非强制的属性：
-
required：防止空提交，但后端仍需校验非空 -
minlength="8"：前端提示长度不足，不能替代服务端强度检查 -
pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}"：简单正则约束，注意 pattern 不会阻止 JS 直接赋值绕过 - 别设
value属性预填密码，模板渲染时注入明文极易被日志或 XSS 泄露
前端“显示密码”功能怎么实现才不翻车
切换 type 属性是最直接方式，但要注意 DOM 更新时机和焦点管理。用 input.type = "text" 切换后，iOS 键盘可能不自动弹出，需手动 input.focus()。
容易踩的坑：
- 只改 type 不同步 placeholder 或 aria-label，导致屏幕阅读器播报错误
- 用 class 控制图标（如 ?️ / ?️?️）但没加
aria-pressed，不符合无障碍标准 - 切换时没保存 selectionRange，用户光标位置丢失
- 在 Vue/React 中直接操作 DOM type 属性，可能触发框架警告或更新异常
最简可行代码：
<input id="pwd" type="password"><button onclick="toggleType('pwd')">显示</button><script>function toggleType(id) { const el = document.getElementById(id); el.type = el.type === 'password' ? 'text' : 'password'; el.focus();}</script>
复杂点在于移动端软键盘行为、密码管理器兼容性、以及和 form 表单验证状态的联动——这些细节往往被当成“小功能”忽略，结果在 iOS 或 Chrome 120+ 上表现不一致。
