inputmode是html input元素的提示属性，仅优化移动端软键盘布局，不强制限制输入或替代校验；稳定值有text、decimal、numeric、tel、email、search、url，需搭配type="text"等泛型类型使用，避免与type="number"冲突。
inputmode 是 HTML <input> 元素的原生属性，用于向浏览器提示用户可能输入的内容类型，从而触发更匹配的软键盘（比如数字键盘、邮箱键盘、搜索键盘等）。它不验证输入，也不改变表单行为，只影响移动端或触屏设备上的键盘弹出样式。
哪些 inputmode 值真正有用且兼容性好
不是所有 inputmode 值在主流浏览器中都表现一致。实测（Chrome 110+、Safari 16.4+、Edge 110+）下稳定生效的有：
-
text：默认，普通全键盘（可省略） -
decimal：带小数点的数字键盘（iOS 和 Android 都支持，比number更准） -
numeric：纯数字键盘（无小数点，Android 表现更一致） -
tel：电话键盘（含 * # + 等符号，适合手机号、分机号） -
email：邮箱键盘（带 @ 和 . 字符快捷键） -
search：搜索键盘（回车键显示“搜索”，触发Enter事件） -
url：网址键盘（带 / . 和 .com 快捷键）
慎用：none（部分安卓机型忽略）、verbatim（基本无支持）、latin 等语言类值（无实际键盘变化）。
inputmode 和 type 的关系与冲突处理
inputmode 是对 type 的补充，但两者可能冲突。浏览器优先级是：type 主导，inputmode 仅在 type="text" 或 type="search" 等“泛型”类型下才明显起效。例如：
<input type="number" inputmode="decimal">
在 iOS 上仍可能弹出基础数字键盘（不含小数点），因为 type="number" 自身已锁定键盘类型；而换成：
<input type="text" inputmode="decimal" pattern="[0-9]*\.?[0-9]*">
就能稳定唤起带小数点的键盘，再配合 pattern 和 JS 校验实现语义控制。
常见搭配建议：
- 金额输入 →
type="text" inputmode="decimal" - 验证码 →
type="text" inputmode="numeric" autocomplete="one-time-code" - 搜索框 →
type="search" inputmode="search" - 邮箱 →
type="email" inputmode="email"（双保险，兼容老版本）
为什么设置了 inputmode 却没反应
这是最常遇到的问题，原因通常不是写错了，而是被以下因素掩盖：
- 桌面浏览器（包括 Chrome 桌面版）完全忽略
inputmode，只在移动/触屏环境生效 - 父容器用了
transform、iframe嵌套过深，或position: fixed键盘定位异常，导致软键盘未正确聚焦 - Vue/React 中动态渲染时，
inputmode属性未正确绑定（如 Vue 写成:inputmode但没加引号，或 React 用inputMode驼峰写法） - iOS Safari 对
inputmode="decimal"要求step="0.1"或step="any"才启用小数点（否则降级为numeric）
调试技巧：在 iOS Safari 中打开「设置 → 辅助功能 → 键盘 → 启用“辅助键盘”」，可强制看到键盘变化；安卓则可用 Chrome DevTools 的 Device Mode + “Sensors → Touch” 模拟。
真正关键的是：不要把它当输入校验用，也不要指望它在桌面端起作用。它的价值只在移动端第一屏体验——让用户少点一次切换键盘的动作。一旦涉及精度（比如金额）、格式（比如身份证）、或跨端一致性，就必须配合 pattern、step、input 事件监听和后端校验来兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
