HTML5密码输入框本身兼容性良好，但placeholder、autocomplete、pattern、required等周边特性及密码管理器对接存在显著浏览器差异，需针对性处理兼容逻辑。
HTML5 的 本身没有兼容性问题——所有主流浏览器（包括 IE6+）都原生支持，它和 type="text" 渲染行为一致，只是输入内容被掩码显示。 真正存在差异的，是它“周边”的新特性：比如 placeholder、autocomplete、pattern、required，以及现代密码管理器（如 Safari AutoFill、Chrome Password Manager）对接逻辑。这些才是各浏览器表现不一的根源。
placeholder 属性在旧浏览器里根本不会显示
IE9 及以下、Android 4.3 以前的 WebView 完全忽略 placeholder，也不会触发任何事件。用户看不到提示文字，容易误以为输入框为空或失效。
- 必须用 JavaScript 模拟：检测
'placeholder' in document.createElement('input')，不支持时动态插入或用value+onfocus/onblur手动控制 - 注意：某些 polyfill（如
jquery.placeholder.js）在密码框上可能暴露明文 placeholder 文本，务必测试是否清空了value或隐藏了 DOM 中的原始值 - 移动端 iOS Safari 在键盘弹出后有时会错误地保留 placeholder 样式，建议加
input[type="password"]:focus::placeholder { opacity: 0; }强制隐藏
autocomplete="new-password" 并非所有浏览器都买账
这个属性本意是告诉浏览器“别自动填充已有密码”，但实际支持度参差：
- Chrome ≥ 68 支持，且对
new-password有明确拦截逻辑 - Safari 12+ 才开始响应，早期版本直接忽略；iOS 15.4 之前甚至会把
new-password当作普通字段尝试填充 - Firefox 始终不识别该值，只认
off（但off在新版 Chrome 中已被弱化） - 真正可靠的写法是组合使用：
autocomplete="off" autocomplete="new-password"（双声明，利用部分浏览器取后者、部分取前者的行为做兜底）
pattern 和 required 的校验时机与 UI 提示不统一
required 在所有现代浏览器中都触发表单提交拦截，但 pattern 的正则校验行为差异明显：
立即学习“前端免费学习笔记（深入）”；
- Chrome / Edge：输入过程中实时高亮错误，提交时弹原生 tooltip
- Safari：仅在提交时校验，且 tooltip 位置偏移、无 close 按钮，常被键盘遮挡
- Firefox：不支持密码框的
pattern提示（因安全策略限制），只做 JS 层校验 - 关键提醒：不要依赖
pattern做强密码规则（如“至少一个大写字母”），它无法防止粘贴绕过；必须配合 JS 监听input和paste事件做实时反馈
最易被忽略的一点：**iOS Safari 在密码框中长按粘贴时，会无视 pattern 和 maxlength，直接插入超长/非法内容——这导致很多前端校验形同虚设。必须在 onpaste 里 event.preventDefault() 并手动截断/过滤，否则后端永远收得到脏数据。
