直接改input.type可切换密码显示状态，但点一下失效常因js未正确同步type值、误用setattribute、dom未加载完成或移动端点击热区不足；须用input.type赋值、确保元素存在、扩展按钮尺寸并适配框架绑定方式。
为什么直接改 type 属性就能切换，但点一下就失效？
因为浏览器对 <input type="password"> 有默认行为：焦点离开时自动清空剪贴板、阻止某些 DOM 修改。但更常见的“失效”其实是 JS 没正确同步 type 值，或用了 setAttribute 却没触发 input 的内部状态更新。
正确做法是直接赋值给元素的 type 属性（不是 setAttribute）：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
const input = document.getElementById('pwd');
const toggleBtn = document.getElementById('toggle');
toggleBtn.addEventListener('click', () => {
input.type = input.type === 'password' ? 'text' : 'password';
});
- 用
input.type = 'text'，不是input.setAttribute('type', 'text')—— 后者在部分旧版 Safari 中不生效 - 切换后记得手动聚焦再失焦一次（
input.focus(); input.blur()），避免某些安卓 WebView 光标错位 - 不要在切换时重设
value，否则可能触发两次输入事件，导致防抖逻辑异常
点击按钮没反应？检查事件绑定时机和元素是否存在
常见错误是脚本执行时 DOM 还没加载完，document.getElementById 返回 null，后续 addEventListener 报错但被静默忽略。
- 把 JS 放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
