inputmode是html5提示移动端弹出对应软键盘的属性，常用值包括decimal（带小数点数字键盘）、numeric（纯数字键盘）、tel（含*#号电话键盘）、email（含@符号键盘）、search（搜索回车键）和text（全功能文本键盘），需配合type属性使用且不可替代输入验证。
inputmode 是 HTML5 中一个轻量但实用的属性，它不改变输入框的功能或验证逻辑，而是向浏览器（尤其是移动端）**提示应弹出哪种类型的软键盘**，从而提升用户输入体验。用对了，能减少用户手动切换键盘的麻烦；用错了，可能被忽略或触发意外行为。
哪些值最常用且效果明确
并非所有 inputmode 值在所有浏览器中都支持良好，目前兼容性较好、语义清晰、实际效果显著的有以下几种：
- decimal：适用于金额、小数类输入（如价格、评分），多数安卓和 iOS 系统会显示带小数点的数字键盘；
- numeric：纯数字场景（如手机号、验证码、年龄），弹出无符号、无小数点的数字键盘；
- tel：电话号码，通常触发带 *、# 和拨号键的键盘（注意：它不自动格式化，也不做验证）；
- email：邮箱地址，键盘常带 @ 和 .com 快捷键；
- search：搜索框，部分系统会显示“搜索”回车键而非“完成”；
- text：显式声明使用全功能文本键盘（适合中文拼音/五笔等输入法场景）。
避开常见误用陷阱
有些写法看似合理，实则效果有限或已被弃用：
- 不要用 inputmode="number" 代替 inputmode="numeric"——
number不是标准值，多数浏览器会忽略； - 不要依赖 inputmode 实现输入限制——它不阻止用户粘贴非法字符，需配合 pattern、type="number" 或 JS 校验；
- password、url 等值虽在规范中存在，但当前主流移动浏览器支持度低，实际几乎不生效；
- 当 type 属性已明确语义时（如
type="email"），inputmode 可省略——浏览器通常已按 type 自动匹配键盘。
结合 type 与 inputmode 的推荐组合
最佳实践是让 type 定义语义和基础行为，inputmode 微调键盘类型。例如：
- 手机号：
<input type="tel" inputmode="numeric">（type="tel"触发拨号键盘，inputmode="numeric"进一步确保数字优先）； - 商品价格：
<input type="text" inputmode="decimal" step="0.01">（type="text"避免 Safari 对 number 类型的自动舍入，inputmode="decimal"呼出带小数点的键盘）； - 验证码：
<input type="text" inputmode="numeric" maxlength="6">（避免type="number"弹出上下箭头，又确保数字键盘）。
兼容性与降级建议
目前 Chrome（Android/iOS）、Edge、Firefox for Android 均较好支持 inputmode；Safari on iOS 支持部分值（如 decimal、numeric、email），但较新版本才稳定。可这样处理：
- 始终把 inputmode 当作「增强体验」而非「功能必需」；
- 不依赖它做输入控制，关键校验仍放在 JS 或服务端；
- 若需强兼容，对老设备可结合
pattern="[0-9]*"（iOS 旧版识别该 pattern 并弹数字键盘）作为补充。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
