密码框隐藏与显示切换通过动态修改input的type属性实现：初始设为password，点击按钮时在password和text间切换；需配合图标状态反馈与aria-label提升可访问性；前端显示不改变传输安全，仍需https及后端加密保障。
密码框的隐藏与显示切换，核心是动态修改 <input> 元素的 type 属性：在 password 和 text 之间切换即可实现视觉上的“显示/隐藏”效果。
基础实现：用 JavaScript 切换 type 属性
HTML 中定义一个密码输入框和一个切换按钮（如 eye 图标），通过 JS 监听点击事件，修改 input 的 type 值。
- 初始
type="password"，确保默认隐藏 - 点击按钮时，判断当前 type：若为
password，则改为text；反之则改回password - 注意：部分旧版 IE 不支持运行时修改
type，但现代浏览器（Chrome/Firefox/Safari/Edge）均兼容
增强体验：添加图标状态反馈
仅切换 type 不够直观，用户需要明确知道当前是“已显示”还是“已隐藏”。建议配合图标变化：
- 使用 Font Awesome、iconfont 或 SVG 图标，例如
?️表示隐藏态，?️?️或闭眼图标表示显示态 - 通过添加/移除 CSS 类控制图标切换，同时更新
aria-label提升可访问性（如 “显示密码” / “隐藏密码”） - 避免仅依赖颜色或大小变化，确保色觉障碍用户也能分辨状态
安全提醒：显示密码不等于明文传输
前端切换 type 只影响页面显示，**不会改变数据提交方式**：
- 表单提交时，无论 type 是 password 还是 text，只要 input 的 name 和 value 正常，后端接收到的仍是明文（需 HTTPS 保障传输安全）
- 切勿因“能看见密码”就误以为前端做了加密——密码应在前端用强哈希（如 PBKDF2）加盐处理，或更推荐交由后端安全验证
- 可选：点击显示时弹出轻提示“密码可见，请注意周围环境”，增强用户安全意识
兼容写法示例（无框架纯 JS）
以下是一段可直接使用的简明代码片段：
<input type="password" id="pwd" placeholder="请输入密码"><button type="button" onclick="togglePwd()" aria-label="显示密码">?️</button>
<script>
function togglePwd() {
const pwdInput = document.getElementById('pwd');
const btn = event.target;
if (pwdInput.type === 'password') {
pwdInput.type = 'text';
btn.textContent = '?️?️';
btn.setAttribute('aria-label', '隐藏密码');
} else {
pwdInput.type = 'password';
btn.textContent = '?️';
btn.setAttribute('aria-label', '显示密码');
}
}
</script>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
