type="password" 是唯一可靠、零成本、原生支持的隐藏方式，浏览器在渲染层自动掩码但 dom value 仍为明文；切 type 切换显隐需同步光标与焦点，且掩码不等于加密或安全存储。
type="password" 是唯一可靠、零成本、原生支持的隐藏方式。它不依赖 JS 或 CSS，浏览器自动把输入字符渲染成圆点或星号，且所有现代浏览器都兼容。
为什么直接改 type="password" 就能隐藏
这是 HTML5 原生语义行为，不是样式伪装。浏览器内核在渲染层拦截了明文绘制逻辑，只显示掩码符号；但 DOM 中的 value 仍是明文，document.getElementById('pwd').value 可随时读取——这点必须心里有数。
- 不需要写 CSS 遮罩、伪元素或透明度覆盖
- 不需要 JS 监听输入再替换内容（那会破坏光标位置、粘贴逻辑和 IME）
- 不设置
name属性会导致表单提交时该字段完全丢失，不是“隐藏”，是“不存在”
别用 display: none 隐藏密码输入框本身
如果目标是“不让用户看到密码框”，而并非“隐藏输入内容”，那 display: none 确实能隐藏整个 <input type="password"> 元素。但它带来的副作用很实际：
- 该字段仍会随表单提交（除非你手动移除或禁用），服务端可能意外收到空值或旧值
- 屏幕阅读器通常跳过
display: none元素，无障碍体验断裂 - 若后续 JS 想
.focus()它，会静默失败（元素不在渲染树中） - 真正需要的是“不可见但可操作”的场景极少，多数情况该用
type="hidden"替代
想让用户手动切换显示/隐藏？改 type 属性最稳
2017 年起所有主流浏览器都支持运行时修改 input.type，无需 hack。关键点在于状态同步和焦点管理：
- 切换前先记录当前光标位置（
selectionStart/selectionEnd），切回type="password"后手动恢复，否则光标常卡在开头 - 切为
text后立即调用.focus()，避免用户点击按钮后失去焦点 - 失焦（
blur）时自动切回password，防止密码长期明文滞留——这是很多人漏掉的安全细节 - 不要用两个 input 互相 show/hide，DOM 节点多、事件绑定复杂、value 同步易出错
真正容易被忽略的，是「掩码只是视觉保护」这件事。哪怕用了 type="password"，只要页面没走 HTTPS，或前端存了明文到 localStorage，或控制台里一行 document.querySelector('input[type=password]').value 就能拿到全部——隐藏输入内容 ≠ 加密传输 ≠ 安全存储。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
