JavaScript 中表单事件怎么在 input[type=password] 中实现明文与密文切换-js教程-PHP中文网

明文/密文切换的核心原理是动态修改input[type="password"]的type属性：从"password"切为"text"显示明文，再切回"password"恢复密文；浏览器原生支持该属性运行时变更，无需重绘元素。

javascript 中表单事件怎么在 input[type=password] 中实现明文与密文切换

明文/密文切换的核心原理

本质是动态修改 input[type="password"] 的 type 属性：从 "password" 切换为 "text"（显示明文），再切回 "password"（恢复密文）。浏览器原生支持该属性的运行时变更，无需重绘或重建元素。

基础实现方式（推荐用 checkbox 控制）

在密码输入框旁添加一个复选框或按钮，监听其 change 或 click 事件，然后切换 input 的 type：

word报告自动生成神器

Word报告自动生成神器。自动生成专业Word文档报告，支持模板填充、目录生成、表格/图表插入、页眉页脚、多级标题、样式主题、批量邮件合并。当用户需要生成Word报告、创建合同文档、批量生成通知/证书、填充Word模板、制作商业计划书时触发。

下载

获取目标 password 输入框（如通过 id 或 querySelector）
检查当前 type 是否为 "password"
若是，设为 "text" 并可选地聚焦输入框（提升体验）；否则设回 "password"
注意：不要用 input 事件监听密码框本身——它不触发 type 切换逻辑

完整 HTML + JS 示例

以下是一个简洁可用的代码片段：

<input type="password" id="pwdInput" placeholder="请输入密码"><label>
  <input type="checkbox" id="showPwd"> 显示密码
</label>

<script>
const pwdInput = document.getElementById('pwdInput');
const showPwd = document.getElementById('showPwd');

showPwd.addEventListener('change', () => {
  pwdInput.type = showPwd.checked ? 'text' : 'password';
  // 可选：切换后自动聚焦，方便用户继续输入
  pwdInput.focus();
});
</script>

注意事项与优化点

实际使用中需留意几个细节：

兼容性：所有现代浏览器（Chrome、Firefox、Safari、Edge）均支持 type 动态切换，无需 polyfill
无障碍（a11y）：为 checkbox 添加 aria-label（如 aria-label="显示密码明文"），并确保 label 正确关联 input
移动端适配：部分 iOS Safari 在 type 切换后可能未立即重绘光标位置，调用 pwdInput.focus() 可缓解
安全性提示：切换为明文时，可在 UI 上短暂显示“明文显示中”提示，增强用户安全意识