html5密码输入框在平板上需同时设置autocapitalize="none"、autocomplete="new-password"、spellcheck="false"、inputmode="text"四属性，并抑制触摸默认行为、控制viewport缩放、主动管理软键盘收起，才能避免失焦、跳动、预测干扰等问题。
HTML5 的 <input type="password"> 在平板上默认会触发系统虚拟键盘的“密码模式”（如 iOS 显示 ? 图标、Android 隐藏字符），但实际体验常出问题：光标跳动、自动大写开启、输入法预测干扰、软键盘不收起、或双击聚焦失效。核心不是“能不能用”，而是“怎么让密码框在平板上不卡、不乱、不暴露”。
为什么平板上 type="password" 容易输错或失焦
平板浏览器（尤其 Safari on iPad 和 Chrome on Android 平板）对 input 的 focus/blur、软键盘生命周期管理较 PC 粗粒度，加上触摸目标小、手势误触多，常见表现有：
- 点击输入框后光标闪一下就消失 → 未正确阻止默认滚动或
touchstart冒泡 - 首字母自动大写（iOS 默认对
text类型开启，但部分 WebView 误判password）→ 缺少autocapitalize="none" - 输入法弹出后无法用回车键提交 → 没监听
keydown中的 Enter 键，或表单submit被阻止 - 双击放大页面，密码框被缩放拉伸 → 缺少 viewport 缩放控制
必须加的 4 个属性（非可选）
仅靠 type="password" 远不够。以下属性需同时存在，缺一不可：
-
autocapitalize="none"：禁用 iOS 自动大写（哪怕密码类型也生效） -
autocomplete="new-password"：避免浏览器填充旧密码（尤其在平板多账号切换场景） -
spellcheck="false"：关闭拼写检查（Android 输入法常因此高亮下划线并弹建议） -
inputmode="text"：显式声明输入意图（注意：不是numeric或decimal，密码可能是混合字符；用text才能唤出完整键盘）
完整写法示例：<input type="password" autocapitalize="none" autocomplete="new-password" spellcheck="false" inputmode="text">
触摸聚焦时防止页面滚动和缩放
平板点击密码框常伴随意外滚动或双击缩放，本质是浏览器对触摸事件的默认行为未抑制：
立即学习“前端免费学习笔记（深入）”；
- 给
input绑定touchstart时，务必调用event.preventDefault()，否则 iOS 可能触发延迟焦点或滚动 -
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">中user-scalable=no必须保留（仅限密码页或敏感流程页） - 避免在密码框父容器上设
overflow: scroll或transform，某些 Android WebView 会在 focus 时重绘异常
软键盘收起与失焦逻辑要主动控制
平板用户习惯点击空白处收键盘，但默认 blur() 不一定触发。别依赖“点外面自动失焦”：
- 监听
document.addEventListener('touchstart', ...)，判断点击目标是否非密码框，然后手动input.blur() - 提交后立即
input.blur()+input.value = ''（清空值防缓存，也避免软键盘残留） - 不要用
focus()强制聚焦——平板上连续 focus 可能导致键盘反复弹收，卡顿明显
特别注意：iOS Safari 在 input 失焦后约 300ms 才真正释放键盘，期间若快速操作其他元素，可能触发“键盘残留+页面错位”现象。
真正麻烦的不是写对那几行 HTML，而是不同平板系统对同一组属性的响应节奏不一致——比如 Android 12 的 Gboard 对 inputmode 响应快，但 iOS 17 的 QuickType 仍会偷偷启用预测。上线前至少要在 iPadOS 16+、Samsung Dex、华为鸿蒙平板三个环境实测三次以上，重点看光标稳定性与回车键通路。
