根本原因是type为不可变属性，setAttribute不触发重绘，旧版Safari等会忽略；应改用el.type=‘text’/‘password’，并配合focus()和setSelectionRange()恢复焦点与光标。
为什么 el.setAttribute('type', 'text') 在某些浏览器里不生效
根本原因是 type 属于表单元素的“不可变属性”（immutable attribute）之一，浏览器规范允许通过 JS 直接赋值 el.type = 'text'，但不保证 setAttribute 能触发 DOM 行为重绘。旧版 Safari 和部分 iOS WebKit 内核会忽略 setAttribute('type', ...) 的调用，导致输入框看起来还是掩码状态，实际却已失去密码校验逻辑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 一律改用
el.type = 'text'或el.type = 'password'，不要用setAttribute - 切换前先检查元素是否存在：
if (el && el.tagName === 'INPUT')，避免Cannot set property 'type' of null - IE 完全不支持动态修改
type（会直接抛错），现代项目可忽略 IE，但若需兼容，得用 DOM 替换方案（删旧 input、新建 input 并复制 value/name/attributes）
type 拼写错误或值非法导致“看似正常实则失效”
拼错 type 属性名（比如写成 tpye="password"）或填错值（type="pasword"、type="text" 忘记切回）时，浏览器不会报错，而是降级为普通 <input type="text"> —— 明文可见、自动填充照常弹出、无掩码、无密码强度校验。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 右键「检查元素」，肉眼确认
type属性值是否准确为"password"或"text" - 动态切换时，必须显式设回
el.type = 'password'，不能只靠 class 控制样式 - 避免在同一个 DOM 节点上反复切
type超过 3–4 次，某些旧版 iOS 会卡在中间状态，光标错位或失焦
动态修改 type 后光标丢失、焦点异常
直接改 el.type 会导致浏览器重置输入框内部状态，包括当前焦点和光标位置。用户切完显示模式后一敲键盘，光标可能跳到开头，甚至整个输入框失焦。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每次
el.type = 'text'后立刻调用el.focus() - 如果之前有选中文本，可配合
el.setSelectionRange(start, end)恢复光标位置（需提前记录） - 不要在
input外层套label并绑定整个区域点击，容易误触两次（一次聚焦、一次切换），引发状态抖动
为什么用 button 触发切换比用 label 更可靠
把切换图标包在 <label> 里，点击时会先触发 label 的 for 关联聚焦，再执行 JS 切换，两件事异步竞争；而 <button type="button"> 能明确阻断表单默认提交行为，且语义清晰、无障碍友好。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 按钮必须显式设
type="button"，否则在<form>内会默认提交，页面刷新 → 所有 JS 修改瞬间失效 - 图标状态要同步更新：比如用
data-visible="false"控制 SVG，避免仅靠 class 名称判断当前模式 - 函数参数化，别硬编码
document.getElementById('pwd')，改成togglePasswordVisibility(inputEl, toggleBtn)提高复用性
password 切成 text 后，iOS 键盘可能从密码键盘切回全键盘，但若没调用 focus()，这个切换就卡住了——用户看不见键盘，也摸不到光标。 
