html5密码输入框在ios和android上表现不一致，主因是系统键盘行为、自动填充逻辑和安全策略干预，而非html5不支持；可通过inputmode=”text”+type=”text”+css遮盖、组合autocomplete属性、监听value而非Event.data、适配显示/隐藏按钮及降级处理webview拦截等方式提升可控性。
HTML5密码输入框在iOS和Android上表现不一致
移动端的 本身是兼容的，但实际体验差异主要来自系统键盘行为、自动填充逻辑和安全策略——不是HTML5不支持，而是平台干预太强。
- iOS safari 默认对
type="password"强制启用「密码自动填充」浮层（钥匙串），且无法用autocomplete="off"彻底禁用；加了autocomplete="new-password"反而更易触发推荐密码生成 - Android chrome 对
autocomplete属性响应较弱，但部分国产ROM（如小米、华为）会拦截密码字段并弹出自定义键盘或安全输入法，导致input事件延迟或丢失 - 某些低端Android机型仍使用WebView内核（如Android 4.4），不支持
inputmode="text"或enterkeyhint，回车键默认为「搜索」而非「完成」
如何让密码输入框在手机端保持可控性
关键不是“让它变兼容”，而是绕过系统过度干预，把控制权收回来一点。
- 用
inputmode="text"+type="text"+ CSS遮盖：视觉仍是圆点，但规避了系统密码逻辑。需配合style="text-security: disc;"（webkit）和-webkit-text-security: disc;，firefox不支持，可降级为font-family: "Password"（自定义字体）或 js 动态替换字符 - 禁用自动填充时，不要只写
autocomplete="off"，要组合：autocomplete="new-password"+name="password-123"（避免匹配已保存字段）+id="pwd-field-xyz"（防被JS注入脚本识别） - 监听
input事件时，别依赖event.data（Safari中粘贴密码时为NULL），改用inputElement.value实时取值
密码可见切换按钮在移动端的适配要点
「显示/隐藏密码」按钮在触屏上必须考虑点击热区、焦点管理和键盘状态。
- 按钮尺寸至少
44px × 44px，符合apple人机界面指南和Android触摸目标最小尺寸要求 - 点击「显示」后切回
type="text"，务必调用inputElement.focus()，否则iOS可能收起键盘；同时设置inputElement.setSelectionRange()保持光标位置 - 避免在
blur事件里立刻切回type="password"，用户点切换按钮时可能触发blur→focus连续事件，造成闪烁。建议加setTimeout(..., 0)延迟切换
Webview嵌套场景下密码输入失效的典型原因
App内嵌H5页面（尤其微信、支付宝、企业微信）中，密码输入异常往往和容器层拦截有关，不是前端代码问题。
立即学习“前端免费学习笔记（深入）”；
- 微信iOS版Webview会劫持所有
type="password"字段，强制走其安全键盘，此时input事件可能被截断，compositionstart等事件不触发 - 解决方案：检测环境（
navigator.userAgent含MicroMessenger且isIOS），对密码字段做降级处理——用type="text"+ 遮盖 + 手动清空剪贴板（navigator.clipboard.readText()不可用时，改用document.execCommand('copy')模拟干扰） - 部分Android App Webview禁用了
inputmode，此时可尝试pattern="[^n]*"辅助软键盘类型判断（效果有限，仅作兜底）
实际项目中最容易被忽略的，是「密码字段获得焦点时系统键盘是否完整渲染」——很多问题表面是输入失效，根源是软键盘弹出过程中，页面布局抖动导致 input 元素临时脱离可视区域或失去焦点。这种情况下，哪怕所有属性都写对了，也会表现为“点不动、输不进”。