### [HTML 密码输入框：原生 type=password 才是正解](https://www.huociguo.com/article/1791)

**Published:** 2026-10-02T10:45:37

**Author:** 米了

**Excerpt:** 不少页面为了实现自定义样式，拿 加 CSS 伪装密码框，或者用 JS 把字符一个个替换成圆点 🔒。这些做法看似…

不少页面为了实现自定义样式，拿 `type="text"` 加 CSS 伪装密码框，或者用 JS 把字符一个个替换成圆点 🔒。这些做法看似灵活，实际把密码管理器、无障碍、浏览器安全策略全部绕开，代价远大于收益。

![挂在拉链上的密码挂锁](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-5192037.jpeg)

密码输入的安全性依赖浏览器原生机制

## 误区一：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，安全与体验同时到位。

**Tags:** autocomplete属性, 密码管理器, 密码输入框, 掩码输入, 表单提交

**Categories:** HTML5

---