直接改input.type会触发浏览器重置控件状态，导致视觉清空、光标跳首——非bug而是规范行为；正确做法是切换前缓存value、切换后立即赋值并focus，且不可省略显式赋值。
为什么type="password"切换type="text"后输入框内容消失？
直接改input元素的type属性会触发浏览器重置——这是规范行为，不是bug。Chrome、Firefox、Safari都这样，改完type后value还在DOM里，但输入框视觉上清空（光标跳到开头、不显示文字），用户误以为密码丢了。
- 根本原因：
type变更时浏览器会重建内部控件状态，但value值其实没丢，只是渲染层没同步刷新 - 验证方法：切换后立即执行
console.log(input.value)，通常能打印出原始密码 - 临时补救：切换后手动调用
input.select()再input.focus()，部分浏览器能强制重绘
用type切换实现明文查看的正确写法
必须在修改type前后主动保值、聚焦、并避免同步阻塞。关键点是：先读value，再改type，最后设回value（哪怕值没变）。
const input = document.getElementById('pwd');
const toggleBtn = document.getElementById('toggle');
<p>toggleBtn.addEventListener('click', () => {
const isPassword = input.type === 'password';
const currentValue = input.value; // 必须提前读取</p><p>input.type = isPassword ? 'text' : 'password';
input.value = currentValue; // 必须显式赋值一次
input.focus();
});</p>
- 不能省略
input.value = currentValue——即使值相同，也要触发浏览器重新渲染 - 不要用
setAttribute('type', ...)，它可能触发两次重绘，更不稳定 - 移动端iOS Safari对
type切换响应慢，建议加setTimeout(() => input.focus(), 0)兜底
为什么不用两个input标签分别控制显示和隐藏？
双input方案（一个type="password"，一个type="text"，用CSS切换visibility）看似绕过问题，但引入新麻烦：
- 焦点管理复杂：切换时需手动转移
focus，否则键盘输入丢失 - 表单序列化失效：
FormData或form.elements可能只提交其中一个，取决于DOM顺序和name是否重复 - 无障碍问题：屏幕阅读器可能同时播报两个字段，或忽略隐藏的那个
- 样式同步成本高：两个
input的padding、border、font-size稍有差异，视觉就错位
input[type="password"]切换时的兼容性陷阱
IE11及更早版本不支持运行时修改type，会直接抛InvalidStateError。现代项目虽可忽略IE，但若需支持旧内核WebView（如某些银行App嵌套浏览器），得降级处理。
- 检测方式：
try { input.type = 'text'; } catch (e) { /* fallback */ } - 降级方案：用
input+span覆盖层模拟明文（监听input事件实时同步到span，用CSS遮罩控制可见性） - 注意
autocomplete="off"在切换后可能失效，需在每次type变更后重新设置
实际操作中最容易被忽略的是：切换后不主动focus()，导致用户点击切换按钮后键盘焦点丢失，尤其在表单连续填写场景下体验断裂。这个细节没有报错，但会让用户反复点击才能继续输入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
