inputmode不是type的替代品，它仅在type="text"/"search"/"password"时生效，用于提示虚拟键盘类型；真正决定语义和行为的是type属性。
inputmode不是type的替代品，别把它当type用
很多人加了 inputmode="numeric 却发现键盘还是全键盘——根本原因是没配对 type。浏览器只在 type="text"、type="search" 或 type="password" 这类“通用型”输入框上尊重 inputmode；如果用了 type="number" 或 type="tel"，inputmode 会被直接忽略。
它本质是给虚拟键盘“提个醒”，不改变语义、不触发校验、也不影响提交值类型。真正决定字段含义和基础行为的，永远是 type 属性。
哪些 inputmode 值真有用，对应什么场景
别背全表，日常就这四个最实用：
-
inputmode="numeric"：邮编、验证码、纯数字 ID 字段（type="text"下用） -
inputmode="decimal"：价格、身高、体重等带小数点的数值（注意小数点位置随系统 locale 变化） -
inputmode="tel"：非电话字段但需要 *# 键的场景，比如短信验证码输入框 -
inputmode="email"：搜索框里搜邮箱时，想快速调出 @ 和 .com 快捷键
其他如 latin、verbatim 等极少用到，iOS/Android 支持也不统一，写了等于白写。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：拼写、大小写、降级失效
inputmode 拼错或大小写不对，浏览器就当没看见：
- 写成
inputmode="numerical"或INPUTMODE="numeric"→ 无效 - 写成
inputmode="number"→ 不是标准值，被忽略（正确是numeric） - 在
type="email"上硬加inputmode="text"→ 覆盖默认邮箱键盘，@ 键没了 - 旧版 Android WebView（≤4.4）和 Safari ≤12.1 完全不支持
inputmode→ 必须搭配type降级（比如邮编字段用type="tel"+pattern="[0-9]{6}"）
要不要加 JS 校验兜底？要看字段敏感度
inputmode 不阻止粘贴、不拦截非法字符、不格式化输入。所以：
- 验证码、邮编这类弱敏感字段：加
inputmode="numeric"+pattern="[0-9]{6}"就够了 - 金额、年龄等强校验字段：必须加
oninput="this.value = this.value.replace(/[^0-9.]/g, '')"，且服务端再验一次 - 别用
onkeypress拦截 —— 它拦不住粘贴、拖拽、语音输入，还容易误杀合法字符（比如小数点）
移动端软键盘行为高度依赖 UA 实现，同一 inputmode 在 iOS 和 Android 上表现可能不同。最稳的做法是：用对 type 打底，inputmode 做增强，关键逻辑永远由 JS + 后端双保险。
