切换密码字段需动态修改input的type属性为"text"或"password"，现代浏览器支持直接赋值，ie需用setattribute()；按钮状态应依据pwdinput.type判断而非文本内容；须处理focus、beforeunload和blur事件确保安全。
点击按钮切换密码字段 type 属性
HTML 原生密码框靠 type="password" 隐藏输入内容，要显示明文，本质是把 type 动态改成 "text"。不能用 value 或 innerHTML 去“解密”——密码文本本来就在 DOM 里，只是浏览器渲染时做了掩码。
- 必须用 JavaScript 修改
input元素的type属性，且 IE 不支持直接改type（会报错），需用setAttribute()或重建节点 - 现代浏览器（Chrome/Firefox/Safari/Edge）允许直接赋值
input.type = "text"，但首次设置后再次设回"password"是安全的 - 别用
input.value做判断依据——它始终是明文，跟type无关
带状态同步的切换按钮写法
按钮需要反映当前状态（“显示”还是“隐藏”），否则用户点一次没反应容易重复点击。推荐用布尔变量或检查 input.type 实时判断，而不是依赖按钮文字字符串匹配。
const pwdInput = document.getElementById('pwd');
const toggleBtn = document.getElementById('toggle');
toggleBtn.addEventListener('click', () => {
if (pwdInput.type === 'password') {
pwdInput.type = 'text';
toggleBtn.textContent = '隐藏';
} else {
pwdInput.type = 'password';
toggleBtn.textContent = '显示';
}
});
- 用
pwdInput.type === 'password'判断，比toggleBtn.textContent === '显示'更可靠——按钮文字可能被 CSS 隐藏或翻译 - 不要在事件里写
pwdInput.setAttribute('type', 'text')：虽然能生效，但会触发控制台警告（Chrome 提示“Cannot set property type of input element”） - 移动端要注意：iOS Safari 在
type切换后可能不自动弹出软键盘，需手动调用pwdInput.focus()
无障碍与安全边界提醒
这个功能本身不涉及加解密，但影响可访问性和基础安全感知。屏幕阅读器会读出明文，而用户离开页面时若忘记切回 password，截图或录屏可能泄露密码。
- 务必在页面卸载前（
beforeunload）或失去焦点时（blur）强制切回type="password"，尤其防止用户最小化窗口后密码一直明文挂着 - 不要用
autocomplete="off"或autocapitalize="off"干扰这个逻辑——它们和type切换无关，但可能让某些浏览器忽略密码字段的默认行为 - 如果项目用了 React/Vue，别直接操作 DOM 的
type，应通过 state 控制input的typeprop，否则框架可能 patch 失败或警告
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
