HTML中实现密码显示隐藏切换的input类型切换方法-html教程-PHP中文网

不能直接用type属性切换input密码显示状态，因会重置光标位置、选中文本甚至清空内容；推荐用双input+CSS显隐控制，或单input切换时缓存并恢复selectionRange。

html中实现密码显示隐藏切换的input类型切换方法

为什么不能直接用 `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，导致用户光标回到开头。这对长密码编辑极不友好。

MidReal

MidReal是一款AI文本写作工具，AI互动式小说文本生成工具。

下载

修复方法（仅适用于必须用单 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);