最直接方式是通过修改input的type属性在"password"和"text"间切换，需同步更新aria-label、焦点及inputmode等配套属性，避免伪遮罩导致选中复制失效或自动化测试失败。
用 type 属性切换密码可见性最直接
浏览器原生支持通过修改 <input> 的 type 属性，在 "password" 和 "text" 之间切换，这是实现“点击显示/隐藏密码”的最简方式。不需要额外库，也不依赖 CSS 伪元素遮罩或 JS 模拟输入。
关键点：必须用 setAttribute('type', ...) 或直接赋值 input.type = 'text'，不能靠 class 控制样式来“假装”显示——那样实际值仍被掩码，无法选中、复制或调试。
- IE10+ 和所有现代浏览器都支持运行时修改
type（除了 IE9 及更早版本会抛错） - 切换后光标位置不会自动重置，用户可能在中间某位突然看到明文，体验尚可但不算完美
- 如果用了
autocomplete="off"或其他表单增强逻辑，切换type后部分浏览器可能清空 autocomplete 下拉，需测试
togglePasswordVisibility() 函数怎么写才稳
一个可靠的小函数要处理状态同步、按钮文本更新、焦点保持，还要防重复触发。常见错误是只改 type 却没更新按钮的 aria-label 或图标，导致无障碍体验断裂。
function togglePasswordVisibility(input, toggleBtn) {
const isPassword = input.type === 'password';
input.type = isPassword ? 'text' : 'password';
input.focus(); // 保持焦点，避免失焦
toggleBtn.setAttribute('aria-label', isPassword ? '隐藏密码' : '显示密码');
toggleBtn.textContent = isPassword ? '?' : '?️';
}
- 不要用
input.value做判断依据——空值或特殊字符可能导致误判 - 务必调用
input.focus()，否则 iOS Safari 在切换后常丢失焦点 - 如果按钮是图标字体（如 Font Awesome），建议同时切
class而非仅改 textContent，便于样式控制
为什么不用 CSS ::-webkit-textfield-decoration 或伪元素遮罩
这类方案本质是盖一层“看起来像密码圆点”的视觉层，实际 <input type="password"> 的值始终被浏览器掩码。用户无法双击选中全部明文、Ctrl+A 失效、复制粘贴得到的是掩码后的占位符（如 ●●●），甚至 DevTools Elements 面板里看到的 value 也是星号。
- 对自动化测试（如 Puppeteer/Cypress）不友好：脚本读不到真实值，断言易失败
- 剪贴板 API（
navigator.clipboard.writeText）写入时若依赖 input.value，会写入掩码内容 - 某些密码管理器（如 Bitwarden）依赖
type="password"自动识别字段，伪遮罩会让其失效
移动端 Safari 的 type 切换有坑
iOS 15.4+ 修复了多数问题，但旧版 Safari 在从 password 切到 text 后，软键盘可能不自动弹出，或弹出英文键盘而非数字键盘（如果原为 inputmode="numeric"）。
- 临时解法：切完 type 后加一次
input.blur(); input.focus();，强制键盘刷新 - 若 input 有
inputmode，切换 type 时它不会自动同步——需手动重设：input.inputMode = 'text' - 真机测试必不可少，模拟器常表现正常但实机出问题
真正麻烦的不是代码多难写，而是忘记在切换后同步 inputmode、autocomplete、aria-label 这些配套属性——它们不动声色地让功能在特定设备或辅助工具下失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
