先看一个真事。网页上周帮朋友改一个后台管理页面，隐藏登录框的密码密码密码输入框默认是type="password"，也就是设置输入时显示圆点或星号。他问我：“能不能加个眼睛图标，显示点了就显示明文？网页”这需求太常见了，几乎每个网站登录或注册时都有。隐藏但实现起来，密码密码很多人第一反应是设置去改type属性，从password变成text，显示然后再变回去。网页逻辑没错，隐藏但细节容易翻车。密码密码

核心就一行：input.type = input.type === 'password' ?设置 'text' : 'password'。可实际写的显示时候，你会发现浏览器对type属性的动态修改支持得不错，但有个坑——某些旧版IE或者移动端浏览器，切换后光标位置会跳到开头，用户接着打字就乱了。解决办法是切换后手动把光标移到末尾，或者干脆用两个输入框叠在一起，一个明文一个密文，切换显示隐藏。后者更稳，但代码量翻倍。我一般选前者，加个setSelectionRange就完事。

眼睛图标怎么放？别用背景图，太死板。直接<span>或者<i>标签，里面塞个SVG或者字体图标，绝对定位到输入框右侧。点击事件绑在图标上，记得加cursor: pointer和user-select: none，不然用户双击会选中图标文字。图标本身要能切换状态——睁眼代表“点击显示密码”，闭眼代表“点击隐藏密码”。我见过有人只放一个眼睛，点完不变，用户根本不知道当前是显示还是隐藏。这是交互设计的基本功。

有个细节：如果输入框里已经有内容，切换类型时，value不会丢，但placeholder会重新渲染。有些浏览器会闪一下。我试过Chrome和Firefox，问题不大。Safari移动端有个怪癖：当type从password切到text时，键盘会从密码键盘变成普通键盘，但高度可能跳一下。如果页面布局是固定高度，用户会感觉页面抖了。解决办法是给输入框容器设min-height，或者用transform做过渡，但别过度设计。

再讲个实际案例。某电商网站登录页，密码框旁边有个“显示”按钮。用户点了之后，密码明文显示，但按钮文字没变。用户以为没生效，又点了一次，结果又隐藏了。这就是状态反馈缺失。正确的做法是按钮文字或图标同步变化：“显示”变成“隐藏”，或者眼睛图标加一条斜线。别小看这个，转化率就靠这些细节。

还有安全层面的考虑。显示密码本身不危险，危险的是在公共场合不小心被人看到。所以有些网站默认不提供这个功能，比如银行APP。但网页端，尤其是注册和登录，提供显示密码能减少输入错误。我统计过自己经手的十几个项目，加了显示密码后，登录失败率降了大概15%。数据不严谨，但趋势明显。

代码实现上，别用onclick内联，用addEventListener。别用innerHTML改图标，用classList.toggle切换类名。CSS里定义好.eye-open和.eye-closed的样式。这样逻辑和样式分离，后期改图标不用动JS。另外，记得给图标加aria-label，比如“显示密码”或“隐藏密码”，屏幕阅读器用户需要这个。

最后说个冷门点。有些浏览器（比如Edge）在密码框获得焦点时会自动显示一个内置的“显示密码”按钮，那是浏览器自带的，你控制不了。如果你自己再加一个，可能会出现两个眼睛。解决办法是加::-ms-reveal伪元素隐藏掉，或者干脆不管，用户点哪个都行。但强迫症患者会想统一。我一般用input::-ms-reveal { display: none; }干掉它。

写到这里，你应该能直接复制代码去用了。核心逻辑就那三行，剩下的是体验打磨。别想太复杂，先让功能跑起来，再调细节。如果遇到光标乱跳，加个setSelectionRange；如果图标不切换，检查类名有没有拼错。就这么简单。