不少页面为了实现自定义样式，拿 type="text" 加 CSS 伪装密码框，或者用 JS 把字符一个个替换成圆点 🔒。这些做法看似灵活，实际把密码管理器、无障碍、浏览器安全策略全部绕开，代价远大于收益。
误区一：text 加 CSS 掩码
用 -webkit-text-security: disc 把文本伪装成圆点。问题：该属性只有旧 WebKit 内核支持，Firefox 完全不认 ⚠️。更关键的是，浏览器仍把它当普通文本框，密码管理器不会识别，也不会触发安全键盘。
误区二：JS 替换字符
输入时把真实值存进变量，输入框只显示星号。纠正：真实值以明文留在 DOM 或 JS 内存中，自动填充完全失效，还增加了 XSS 泄露的风险。移动端同样无法触发系统的密码自动填充。
误区三：自绘输入法式键盘
为了防键盘记录而自绘软键盘。纠正：系统级安全键盘已经覆盖该场景，自绘键盘反而带来可用性与无障碍问题，屏幕阅读器无法朗读。
原生写法的完整配置
<input type="password" name="pwd"
autocomplete="current-password" />原生 type="password" 自带系统掩码、密码管理器填充、安全键盘三项能力 ✅。注册场景把 autocomplete 设为 new-password，浏览器会主动建议强密码。显示密码切换按钮只需 JS 在 password 与 text 之间切换 type，真实值始终由浏览器托管。
结论：密码框没有样式自定义的正当理由。原生控件配上 autocomplete，安全与体验同时到位。