HTML无法实现密码框显示/隐藏切换，必须用JavaScript动态修改input.type属性；CSS仅能视觉伪装，不改变实际输入行为，且存在安全与体验风险。
HTML 本身无法实现密码框的显示/隐藏切换，必须配合 JavaScript 控制 type 属性；纯 HTML 或 CSS 均不能动态修改输入类型。
为什么 <input type="password"> 不能靠 CSS 切换显示状态
CSS 无法修改元素的 type 属性值，伪类（如 ::after）或 visibility / opacity 等样式仅影响视觉，不改变实际输入行为——用户仍看不到明文，且复制粘贴、聚焦、表单提交等逻辑不受影响。所谓“CSS 实现”本质是障眼法，不可用于生产环境。
用 JavaScript 切换 type 的正确写法
核心是动态设置 input.type 为 "text" 或 "password"，同时注意兼容性和焦点保持：
- 必须使用
setAttribute('type', ...)或直接赋值input.type = 'text'，但 IE8- 不支持直接赋值type，建议统一用setAttribute - 切换后应手动调用
input.focus()，否则光标会丢失（尤其在 Safari 和部分 Android 浏览器中） - 不要在切换前移除或重建 DOM 节点，会导致状态丢失（如已输入内容、选择范围、验证状态）
示例：
立即学习“前端免费学习笔记（深入）”；
<input id="pwd" type="password">
<button onclick="togglePwd()">?️</button>
<p><script>
function togglePwd() {
const input = document.getElementById('pwd');
const isPassword = input.type === 'password';
input.setAttribute('type', isPassword ? 'text' : 'password');
input.focus(); // 保持光标
}
</script>常见错误：用 input.value 模拟明文显示
有人试图用一个 text 输入框和一个 password 输入框来回同步 value，这是高风险做法：
- 两个输入框的 selectionStart / selectionEnd 不同步，导致光标错位
- 触发多次
input事件，干扰防抖、校验等逻辑 - 移动端软键盘反复弹起收起，体验极差
- 若未严格监听所有事件（
cut、paste、keydown），极易不同步
结论：只操作同一个 <input> 元素的 type，其他方案都是绕远路且埋雷。
无障碍与安全注意事项
切换显示时需兼顾可访问性与最小化风险：
- 按钮必须有明确的 ARIA 标签，例如
aria-label="显示密码"，并在状态变化时更新（如改为"隐藏密码"） - 避免默认开启明文显示，首次加载必须是
type="password" - 不要记录或上报明文状态到日志、监控或埋点，防止敏感信息泄露
- 在密码强度较弱或字段较长时，可考虑限制“显示”时长（如 3 秒后自动切回），但这需额外定时器控制，不是标准做法
真正麻烦的从来不是切换逻辑本身，而是焦点管理、移动端软键盘响应、以及无障碍语义的持续维护——这些细节不处理，用户一点击就卡住或读屏器报错，比功能缺失更伤体验。
