必须用JavaScript动态切换input的type属性实现显示/隐藏，因原生::-ms-reveal仅IE/Edge支持，CSS伪元素模拟不可靠且破坏可访问性与表单功能。
直接用 <input type="password"> 就能实现基础的密码隐藏，这是浏览器原生支持、无需 JS 的最简方案；但若要加“显示/隐藏”切换按钮，则必须用 JavaScript 动态切换 type 属性，不能靠 CSS 伪元素或遮罩模拟。
用 type="password" 实现默认隐藏
这是所有现代浏览器都支持的标准行为，输入内容自动渲染为圆点（●）或星号（*），无需额外代码：
<input type="password" id="pwd" name="password" placeholder="请输入密码">
注意：type="password" 仅控制视觉层隐藏，不加密、不传输保护——它只是前端掩码。后端仍需 HTTPS + 加密存储。
- 移动端会自动调出数字/符号增强键盘，体验更好
- 不要给它设
autocomplete="off"，应改用autocomplete="new-password"或autocomplete="current-password"，否则 Chrome 会报 warning 且密码管理器可能失效 - 若需限制长度，用
maxlength="16"，别依赖 JS 拦截
用 JavaScript 切换 type 实现显示/隐藏按钮
这是目前唯一跨浏览器稳定可用的方案。旧版 IE 的 ::-ms-reveal 已淘汰，Chrome/Firefox/Safari 均不支持；CSS 伪元素模拟（如 -webkit-text-security）兼容性差且不可靠。
立即学习“前端免费学习笔记（深入）”；
核心逻辑就是监听按钮点击，读取当前 input.type，再设回 "text" 或 "password"：
const pwdInput = document.getElementById('pwd');
const toggleBtn = document.querySelector('.toggle-password');
toggleBtn.addEventListener('click', () => {
const isPassword = pwdInput.type === 'password';
pwdInput.type = isPassword ? 'text' : 'password';
toggleBtn.setAttribute('aria-label', isPassword ? '隐藏密码' : '显示密码');
});
- 必须用
setAttribute('type', ...)或直接赋值pwdInput.type = ...，不能只改 CSS 类或 visibility - 按钮建议加
tabindex="-1"，避免键盘 tab 流中意外聚焦，干扰表单顺序 - 切换后，
input光标位置会丢失（尤其在中间编辑时），如需保留焦点和光标，得手动记录并恢复selectionStart/selectionEnd
为什么不用 CSS 模拟或 output 反馈？
有开发者尝试用 font-family: "text-security-disc" 或透明度叠加来“假装”隐藏，这类做法在 Safari 中失效，在 Firefox 中表现不一致，且无法解决粘贴、选中、全选等交互异常；而用 <output></output> 显示密码强度是辅助功能，和“是否明文显示”无关，二者目标不同，不能混用。
另外，pattern、required 等验证属性仍可照常使用，它们与 type 切换完全解耦——哪怕当前是 type="text"，只要原始声明是 type="password"，表单提交时依然按密码字段处理（无影响）。
真正容易被忽略的是：切换 type 后，input 的 value 不变，但某些老旧 polyfill 或自定义验证库会监听 input 事件并重置状态，导致输入中断。所以务必在真实设备上测试 iOS Safari 和 Android Chrome 的软键盘行为，尤其是长按粘贴、光标拖动场景。
