inputmode 是唯一能稳定影响软键盘布局的原生 HTML 方式，但需满足用对 type、选对 inputmode 值、真机验证三条件；iOS Safari 16.4 前基本不支持，部分机型仍 fallback；国产安卓兼容性差；tel 和 email 是最稳的两个值；验证码用 text+numeric+pattern，金额用 text+decimal+pattern；键盘遮挡应监听 focus 后 scrollIntoView；所有触发必须由用户手势发起。
inputmode 是唯一能稳定影响软键盘布局的原生 HTML 方式，但它不是“触发器”，而是提示；真正起效必须满足三个条件：用对 type、选对 inputmode 值、在真机上验证过——否则写再多也弹不出数字键盘。
为什么 inputmode="numeric" 有时还是弹全键盘
iOS Safari 在 16.4 之前基本不支持 inputmode，而即使在 16.4+，numeric 在部分机型（如 iPhone 12 搭载 iOS 16.3）仍会 fallback 到默认键盘；国产安卓机更不可靠——vivo、OPPO 的系统输入法常直接忽略该属性。同一页面在小米弹数字键，在华为却弹拼音，就是这个原因。
常见错误现象：
- 写了
inputmode="numeric"却配了type="number"→ iOS 直接忽略inputmode - 用了
type="text"但没加pattern或 JS 过滤 → 用户粘贴字母照样进 - 只在 Chrome 模拟器里测 → 真机行为完全不同
inputmode="tel" 和 inputmode="email" 是目前最稳的两个值
这两个值在 iOS Safari（16.4+）和 Android Chrome（82+）上支持度最高，且行为一致：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
inputmode="tel"应搭配type="tel"使用，双保险；别用type="text"+inputmode="tel"，语义弱、自动填充可能失效 -
inputmode="email"对中文输入法无效——用户切到拼音后，@ 键就消失了，这是系统级限制，前端拦不住 - 它们都不校验格式：
inputmode="email"不防 “abc@” 或空格，必须配pattern="^[^\s@]+@[^\s@]+\.[^\s@]+$"或提交时 JS 校验
金额、验证码等场景该用哪个组合
别迷信 type="number"，它在 iOS 上问题集中：小数点被转成逗号、粘贴失败、长按复制被禁、滚动 spinner 干扰布局。
- 验证码（4–6 位纯数字）→
<input type="text" inputmode="numeric" pattern="[0-9]{4,6}"> - 金额（含小数）→
<input type="text" inputmode="decimal" pattern="[0-9.]*">，再用parseFloat()处理输入值 - 商品数量、页码、ID → 用
inputmode="numeric"更兼容；inputmode="decimal"在 iOS 上小数点不一定出现 - 别写
inputmode="decimal"却允许负数——减号在多数软键盘上不默认出现
键盘弹出后输入框被遮挡怎么办
这不是 inputmode 能解决的问题，而是 viewport 和滚动逻辑的事。iOS 和 Android 在键盘展开时会压缩可视区域，但 window.innerHeight 可能还没更新，手动计算 top 值极易出错。
- 监听
focus事件后立刻调用scrollIntoView({ block: 'nearest', inline: 'nearest' })，比自己算位置更可靠 - 别在
click回调里提前 scroll，时机太早，DOM 还没真正获得焦点 - 老版微信 X5 内核不支持
behavior: 'smooth'，去掉该参数更稳妥 - 想锚定弹层位置？优先用
position: fixed; bottom: env(keyboard-inset-bottom, 0)（iOS Safari 支持），而非固定像素值
真正容易被忽略的是：所有这些设置都依赖用户真实点击或触摸来触发 focus；浏览器禁止脚本主动弹键盘，所以任何“自动聚焦+弹键盘”的尝试，只要不是由用户手势发起，基本都会静默失败。
