JavaScript中实现密码框明文/密文切换需动态修改input的type属性（password/text），配合按钮控制状态，并注意聚焦保持、图标优化、键盘支持及移动端适配，避免使用双input或text-security。
在 JavaScript 中实现密码框明文/密文切换，核心是动态修改 <input> 的 type 属性（在 "password" 和 "text" 之间切换），并配合一个切换按钮（如带图标的 <button> 或 <span>）控制状态。
基础 HTML 结构
需要一个密码输入框和一个触发切换的控件（常用 eye 图标）：
<input type="password" id="password" placeholder="请输入密码"><br><button id="toggleBtn">?️</button>
用 JavaScript 控制 type 切换
监听按钮点击，读取当前 type 值，再设为相反类型，并同步更新按钮提示文字或图标：
const passwordInput = document.getElementById('password');<br>const toggleBtn = document.getElementById('toggleBtn');<br><br>toggleBtn.addEventListener('click', () => {<br> if (passwordInput.type === 'password') {<br> passwordInput.type = 'text';<br> toggleBtn.textContent = '?'; // 或换成关闭眼图标<br> } else {<br> passwordInput.type = 'password';<br> toggleBtn.textContent = '?️';<br> }<br>});
增强体验的小技巧
-
聚焦保持：切换 type 时输入框会短暂失焦，可手动调用
passwordInput.focus()保持光标位置 - 图标更专业：用 Font Awesome、iconfont 或 SVG 替代纯文本 emoji，支持颜色/尺寸控制
-
键盘支持：给按钮添加
tabindex="0"并监听Enter/Space键，满足无障碍访问 -
移动端适配：iOS Safari 切换 type 后软键盘可能不自动弹出，可在切为
text后加passwordInput.select()触发重唤
注意事项
直接改 type 是标准且兼容性好的方式（IE9+ 支持）。不要用两个 input 互相隐藏显示——会丢失焦点、光标位置和输入历史；也不要仅靠 CSS `text-security`（兼容性差，非真正明文）。
立即学习“Java免费学习笔记（深入）”；
