应根据输入内容需求选择：纯数字用 inputmode="numeric"，需小数点用 inputmode="decimal"；但需注意 type 属性会覆盖 inputmode，国产输入法和旧系统兼容性差，推荐优先使用 inputmode="tel" 或 inputmode="email"。
inputmode="numeric" 和 inputmode="decimal" 该选哪个
看用户要按什么键，不是看字段叫“金额”还是“验证码”：
- inputmode="numeric"：只提示 0–9 数字键，无小数点、无负号。适合验证码、手机号、页码、ID 等纯数字场景，在 iOS/Android 上兼容性最稳
- inputmode="decimal"：提示带小数点（有时还有逗号）的数字键盘，但减号（−）不默认出现。适合金额、评分、身高、温度等需小数点的场景；iOS 16.4+ 和 Android Chrome 82+ 才较可靠，旧系统直接 fallback 到 text 键盘
- 别写 inputmode="decimal" 却指望输 “-12.5”——多数软键盘根本不显示减号，用户得手动切键盘找
- 别把验证码配成 inputmode="decimal"：多出来的小数点反而干扰输入，还可能被误粘贴进非法字符
为什么写了 inputmode 还是弹全键盘
这不是语法错误，而是被压制或环境不支持：
- type="number" 会覆盖 inputmode，尤其在 iOS 上直接忽略后者，甚至导致键盘闪退
- 国产安卓输入法（vivo Jovi、华为 HMS、OPPO iFlyIME）基本不读 inputmode，只响应 type="tel" 或 type="number"
- iOS 16.3 及更早版本完全不支持 inputmode，自动降级为 text 键盘
- 父容器用了 transform 或 position: fixed，可能导致聚焦异常，键盘不弹或错位
- Vue/React 中动态渲染时属性没正确绑定：Vue 要写成 inputmode="'decimal'"，React 要用 inputMode 驼峰写法
哪些 inputmode 值真正值得用
实测下来，只有少数几个值跨平台行为较一致：
- inputmode="tel" 和 inputmode="email" 是目前最稳的两个：iOS 16.4+ 和 Android Chrome 82+ 基本都响应，前者倾向唤起带 *# 的拨号键盘，后者在 Android 上常显示 @/.com 快捷键
- inputmode="search" 不改键盘布局，但能把回车键文字统一为「搜索」，且 event.key === 'Enter' 可靠，适合触发搜索逻辑
- inputmode="url"、inputmode="none"、inputmode="verbatim" 效果极不稳定，慎用；inputmode="none" 并不禁用输入，只隐藏键盘，适合自建软键盘场景
- 别用 inputmode="number"——它不是标准值，多数浏览器会忽略
怎么搭配 type 和 pattern 做兜底
inputmode 是软提示，不是校验开关，必须配合其他手段：
- 验证码：<input type="text" inputmode="numeric" pattern="[0-9]{4,6}">（避开 type="number" 的粘贴拦截）
- 金额：<input type="text" inputmode="decimal" pattern="[0-9.]*">，再用 parseFloat() 处理值（避免 Safari 对 type="number" 的小数点转逗号）
- 邮箱：<input type="email" inputmode="email" pattern="^[^\s@]+@[^\s@]+\.[^\s@]+$">（inputmode 不防错，pattern 或提交时 JS 校验不可少）
- 所有场景下，粘贴 “abc123” 或 “+86 138****1234” 依然能进输入框——inputmode 不拦截、不锁输入法
真机测试比模拟器可靠十倍，尤其要覆盖国产机型；中文输入法激活时，所有快捷键（@、小数点、*#）都会消失——这是系统级限制，前端拦不住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
