应使用<input type="password">创建密码框，因其原生支持内容隐藏、密码管理器识别及安全特性；禁用type="text"+JS模拟，避免安全风险与兼容问题。
用 <input type="password"> 创建密码输入框
直接写 <input type="password"> 就行，浏览器会自动隐藏输入内容（显示为圆点或星号），这是最基础也最可靠的方式。它和 <input type="text"> 的语法完全一致，只是类型不同。
常见错误是手误写成 type="pwd" 或 type="secret"——这些都不被识别，浏览器会当成普通文本框处理，明文显示密码。
- 必须用
type="password"，大小写敏感，不能缩写 - 建议始终搭配
name属性（如name="password"），否则表单提交时该字段可能被忽略 -
id和autocomplete值要谨慎：设autocomplete="off"在现代浏览器中可能被忽略，而设autocomplete="current-password"反而更利于密码管理器识别
为什么不能用 <input type="text"> 加 JavaScript 遮盖
有人试图用普通文本框 + 监听输入 + 动态替换字符来“模拟”密码框，这既不安全也不必要。真实密码框由浏览器原生实现，具备关键特性：type="password" 输入的内容不会被开发者脚本轻易读取（比如禁用复制、防止选中文本），且能正确响应系统级密码管理器（如 macOS Keychain、Chrome 密码填充）。
手动模拟会漏掉这些底层行为，还可能引入 XSS 风险（例如未转义地插入 DOM）。
立即学习“前端免费学习笔记（深入）”；
- 原生
type="password"自动禁用右键菜单中的“复制”选项（部分浏览器） - 移动端软键盘会默认弹出密码专用布局（带隐藏/显示切换按钮）
- 密码管理器只识别标准
type="password"字段，不会识别 JS 模拟的“伪密码框”
设置密码框的常见配套属性
单独一个 <input type="password"> 往往不够，实际使用中需配合几个关键属性才能兼顾可用性与安全性。
-
required：强制用户填写，避免空提交（但别忘了后端也要校验） -
minlength：比如minlength="8"，浏览器会在提交前提示长度不足（注意：IE 不支持） -
pattern：如pattern="(?=.*\d)(?=.*[a-z]).{8,}"限制必须含数字和小写字母（正则在前端仅作提示，不可替代后端验证） -
aria-label或关联<label>：屏幕阅读器需要明确知道这是“密码”，不能只靠 placeholder
容易被忽略的兼容性与体验细节
看似简单，但有几个点在真实项目里经常翻车：
- 不要依赖
placeholder当作说明文字——密码框里 placeholder 文字也被遮盖，用户根本看不见；应使用外部<label>或下方辅助文字 - iOS Safari 对
autocapitalize="none"和autocorrect="off"有残留影响，虽然密码框本身不触发拼写检查，但加了反而可能干扰密码管理器自动填充 - 如果页面用了 CSS 重置（如
input { font-family: inherit; }），确保字体支持等宽显示，否则圆点间距异常可能影响可读性
真正麻烦的从来不是怎么写那一行 <input type="password">，而是后续所有围绕它展开的交互、提示、兼容和安全链路。写完之后，用手动输入、粘贴、自动填充、密码查看开关、屏幕阅读器过一遍，比多查十个教程都管用。
