不能直接用type属性切换input密码显示状态，因会重置光标位置、选中文本甚至清空内容；推荐用双input+CSS显隐控制，或单input切换时缓存并恢复selectionRange。
为什么不能直接用 type 属性切换 input 的密码显示状态
浏览器对 input[type="password"] 和 input[type="text"] 的内部处理机制不同，尤其是焦点、光标位置、自动填充行为。直接修改 type 属性在部分旧版 Chrome 和 Safari 中会触发输入框重置：光标跳到开头、选中文本丢失、甚至清空已输入内容（哪怕只是临时切换）。这不是 bug，而是规范允许的实现差异。
实操建议：
- 避免直接赋值
input.type = "text"或input.setAttribute("type", "text") - 若必须切换类型，优先使用现代方案（见下一条）
- 如需兼容 IE11，改用双
input元素 + CSS 显隐控制（更稳妥）
推荐做法：用两个 input 元素 + visibility: hidden 切换
核心思路是 DOM 层面保留两个 input：一个 type="password"，一个 type="text"，通过 CSS 控制哪个可见。这样完全规避了 type 切换带来的状态丢失问题。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 两个
input共享同一name和id（仅一个实际可聚焦），但用tabindex="-1"禁用不可见的那个的键盘焦点 - 用
visibility: hidden而非display: none，确保表单提交时仍能获取值（display: none的元素不参与表单提交） - 同步值：任一输入框内容变化时，立即复制到另一个（监听
input事件，而非change） - 聚焦逻辑：点击“显示”按钮时，主动
.focus()到type="text"输入框，并保持光标位置（需手动保存/恢复selectionStart/selectionEnd）
示例关键逻辑：
const pwdInput = document.getElementById("pwd");
const txtInput = document.getElementById("pwd-text");
const toggleBtn = document.getElementById("toggle");
txtInput.addEventListener("input", () => pwdInput.value = txtInput.value);
pwdInput.addEventListener("input", () => txtInput.value = pwdInput.value);
toggleBtn.addEventListener("click", () => {
const isHidden = pwdInput.style.visibility === "hidden";
pwdInput.style.visibility = isHidden ? "visible" : "hidden";
txtInput.style.visibility = isHidden ? "hidden" : "visible";
if (!isHidden) txtInput.focus();
});
type="password" 切换为 type="text" 时的光标位置丢失问题
即使某些浏览器支持直接改 type，也会重置 selectionStart/selectionEnd，导致用户光标回到开头。这对长密码编辑极不友好。
修复方法（仅适用于必须用单 input 的场景）：
- 切换前先缓存
input.selectionStart和input.selectionEnd - 切换后立即调用
input.setSelectionRange(start, end) - 注意：必须在
type修改后加setTimeout(..., 0)或requestAnimationFrame，否则 DOM 尚未更新，setSelectionRange无效
示例片段：
const input = document.getElementById("pwd");
const start = input.selectionStart;
const end = input.selectionEnd;
input.type = "text";
setTimeout(() => {
input.setSelectionRange(start, end);
}, 0);
移动端 iOS Safari 的特殊坑：软键盘不自动切换输入模式
iOS Safari 在 input[type="password"] 切换为 type="text" 后，软键盘仍保持数字/符号布局（尤其当之前输入过数字），不会自动切回全键盘。用户得手动点键盘上的“ABC”键才能切换。
缓解手段有限，但可尝试：
- 切换类型后，立即
input.blur()再input.focus()，强制键盘重建（部分 iOS 版本有效） - 添加
inputmode="text"属性（仅对新版本 Safari 有效，iOS 16.4+） - 不强求完美适配，优先保障功能可用性——毕竟用户点“显示”是为了确认内容，不是高频编辑
真正难搞的是那种既要实时校验、又要密码明文编辑、还要兼容老 iOS 的需求；这时候双 input 方案反而最省心，因为 type="text" 元素天生就走全键盘路径。
