直接改input.type可切换密码显示状态，但点一下失效常因JS未正确同步type值、误用setAttribute、DOM未加载完成或移动端点击热区不足；须用input.type赋值、确保元素存在、扩展按钮尺寸并适配框架绑定方式。
为什么直接改 type 属性就能切换，但点一下就失效？
因为浏览器对 <input type="password"> 有默认行为：焦点离开时自动清空剪贴板、阻止某些 DOM 修改。但更常见的“失效”其实是 JS 没正确同步 type 值，或用了 setAttribute 却没触发 input 的内部状态更新。
正确做法是直接赋值给元素的 type 属性（不是 setAttribute）：
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 放在
</body>前，或用DOMContentLoaded包裹 - 确认按钮和 input 的
id拼写完全一致（区分大小写），且没有重复 id - 如果用框架（如 Vue/React），别直接操作原生 DOM —— 在 Vue 中应绑定
:type，React 中用useState控制type值
移动端点击区域太小，用户点不中怎么办？
原生 <input> 的 type 切换按钮常是纯图标，iOS Safari 默认最小点击热区只有 44×44px，小图标极易误触失败。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 给按钮加
style="min-width: 44px; min-height: 44px;"，并用padding扩展可点击范围 - 避免用
<i>或<span>当按钮，优先用<button type="button">—— 更易获得无障碍支持和默认 focus 样式 - 在 iOS 上，添加
ontouchstart=""（空属性）可提前激活点击响应，避免 300ms 延迟
密码明文显示时，如何防止截图/录屏泄露？
这是业务侧容易忽略的一环：前端能切，不代表该切。明文态下，系统截图、录屏、甚至 macOS 的「缩略图预览」都可能捕获密码。
- 敏感场景（如银行登录）建议禁用明文切换，或仅允许单次显示 3 秒后自动恢复
password - 不要依赖 CSS
visibility: hidden或opacity: 0来“隐藏”明文 —— 它们仍可被截取 - 真要兼顾可用性与安全，可考虑用 canvas 动态绘制字符（非真实 DOM 文本），但成本高、兼容性差，一般项目不推荐
真正难的不是切类型，而是判断什么时候不该切。
