HTML5 中的密码输入框默认就是隐藏明文的，不需要额外“开启隐藏”——<input type="password"> 本身就会用圆点（●）遮盖字符。所谓“明文显示”是用户主动触发的交互行为，不是默认状态，也没有“隐式保隐私技巧”这种玄乎说法，只有标准用法和常见误操作。
为什么 type="password" 输入框看起来没隐藏？
常见原因不是 HTML 写错了，而是：
- 开发者误用了
type="text"却加了 placeholder 或 label 写着“密码”，实际没启用掩码 -
浏览器插件（如密码管理器）临时覆盖了
type属性，把type="password"强制改成了type="text"以便自动填充 - CSS 错误设置了
text-security: none或-webkit-text-security: none（旧版 Safari/Chrome 支持，会禁用圆点遮罩） - JavaScript 动态修改了
input.type，比如切换“显示密码”时没及时切回"password"
实现“点击显示/隐藏密码”的安全写法
这个功能本身不破坏隐私，默认仍是隐藏的，关键在切换逻辑是否可靠：
- 不要只靠
input.type = "text"切换——这会让密码短暂暴露在 DOM 中，且可能被 DevTools 或辅助工具捕获 - 推荐用
input.setAttribute("type", "text")+input.setAttribute("type", "password")，配合autocomplete="off"减少浏览器自动填充干扰 - 务必监听
blur或focusout事件，在失去焦点时强制切回"password"，防止用户切走后密码仍明文挂着 - 避免用
value属性反复读写——现代做法是保持input.value始终为真实值，仅控制type和视觉反馈
示例关键片段：
<input id="pwd" type="password" autocomplete="off">
<button onclick="togglePwd()"></button>
<script>
function togglePwd() {
const i = document.getElementById("pwd");
const isPwd = i.type === "password";
i.type = isPwd ? "text" : "password";
// 切回后立即 focus，避免光标丢失
if (isPwd) i.focus();
}
// 失焦自动隐藏
document.getElementById("pwd").addEventListener("blur", () => {
if (document.getElementById("pwd").type === "text") {
document.getElementById("pwd").type = "password";
}
});
</script>
移动端和密码管理器兼容性要注意什么？
移动端 Safari 和部分 Android 浏览器对 type="password" 的处理更严格：
