HTML密码输入框不能用toggle事件切换明文，因该事件非标准；应监听click事件，动态修改input.type属性在password与text间切换，并同步更新aria-label以保障可访问性。
HTML密码输入框怎么用toggle切换明文显示
不能直接靠 toggle 事件实现——HTML 原生没有 toggle 事件，这是常见误解。真正可行的是监听按钮点击（或 click），然后动态切换 input 的 type 属性在 "password" 和 "text" 之间切换。
为什么不能用 toggle 事件
浏览器不支持名为 toggle 的标准事件；有人误把自定义事件、第三方库方法或控制台调试时的临时操作当成了原生能力。
-
toggle不是 DOM 标准事件，addEventListener("toggle", ...)完全不会触发 - 部分 UI 框架（如 Bootstrap）有
toggle()方法，但那是 JS 函数，不是事件 - 真要用“切换”语义，得自己写逻辑：记录当前状态，再取反
最简可靠的切换实现（纯 HTML + JS）
核心就三步：加一个按钮、绑定点击、改 input.type。注意必须操作 DOM 元素本身，不能只改属性字符串。
<input id="pwd" type="password" value="123456"><button onclick="togglePwd()"></button>
<script>
function togglePwd() {
const input = document.getElementById("pwd");
input.type = input.type === "password" ? "text" : "password";
}
</script>
- 必须用
input.type = ...赋值，setAttribute("type", ...)在部分旧版 Safari 中会失效 - 切换后焦点不会丢失，但 iOS Safari 会自动唤起键盘（这是系统行为，无法绕过）
- 如果 input 有
autocomplete="current-password"，切到text后密码管理器可能不再遮掩，属预期行为
容易被忽略的细节：focus 状态与可访问性
单纯改 type 不影响 :focus 样式，但屏幕阅读器和键盘导航用户需要明确知道当前是明文还是密文。
- 建议同步切换按钮的
aria-label，例如从 “显示密码” 切到 “隐藏密码” - 不要用图标代替文字，至少保留
aria-label或aria-hidden="true"配合span文本 - 如果 input 失去焦点后再切回
password，已输入的明文不会被清空，但剪贴板历史可能残留（这是用户主动复制导致的，非代码问题）
实际项目里，状态管理、防抖、兼容 IE（需 polyfill type 切换）这些都可能冒出来，但只要记住：没有 toggle 事件，只有你写的 click + type 切换逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
