inputmode属性仅在移动端生效，桌面端被忽略；它仅为虚拟键盘提示，不替代type属性，需配合js校验确保输入合规。
inputmode 属性只在移动端生效，桌面端基本被忽略
浏览器对 inputmode 的支持集中在 iOS 和 Android 的 WebView / Chrome / Safari 移动版；桌面 Chrome 虽然解析该属性，但不会触发任何键盘切换行为。如果你在桌面端测试没反应，不是写错了，是它本来就不工作。
常见误判场景：inputmode="numeric" 在桌面输入框里依然弹出全键盘——这属于预期行为，不是 bug。
- 真机调试必须用 iOS 16.4+ 或 Android Chrome 100+，旧版本可能完全不识别
inputmode - Safari 对
inputmode="decimal"支持滞后，iOS 17 才稳定支持；此前会 fallback 到numeric - 微信内置浏览器（X5 内核）部分版本会无视
inputmode，需配合type="number"双保险
type 和 inputmode 不是互斥关系，而是协同作用
inputmode 不替代 type，它只是“提示”虚拟键盘偏好；实际键盘形态由两者共同决定，且 type 优先级更高。比如：<input type="email" inputmode="text"> 仍会弹出邮箱键盘（带 @ 和 . 键），因为 type 的语义权重更高。
真正起效的组合需要语义一致或互补：
-
<input type="text" inputmode="numeric">→ 弹出纯数字键盘（适合金额、编号等无小数点场景） -
<input type="text" inputmode="decimal">→ 弹出带小数点的数字键盘（iOS/Android 均支持，但 Android 部分机型显示为numeric） -
<input type="search" inputmode="search">→ 触发搜索键盘（带「搜索」回车键，仅部分 Android 生效）
inputmode="tel" 和 type="tel" 的区别很实际
inputmode="tel" 仅调度电话键盘（含 * # + 等符号），不触发任何格式校验或自动链接；而 type="tel" 除调度键盘外，还允许浏览器添加电话号码链接（点击拨号）、影响表单验证逻辑（如空值校验宽松）。
选哪个取决于你要什么：
- 只要键盘布局 → 用
inputmode="tel"，避免type="tel"带来的意外链接或 iOS 自动大写首字母 - 需要拨号功能 + 键盘 → 用
type="tel"，不用额外设inputmode - 输入国际号码（含 +）又怕 iOS 自动加空格 → 用
inputmode="text"+pattern="[+0-9\s]*"更可控
inputmode 对 form 提交和 JS 获取值完全无影响
它纯粹是 UI 层提示，不影响 input.value 类型、提交时的字段内容、正则匹配结果，也不会阻止用户粘贴非数字字符。别指望靠 inputmode="numeric" 来过滤输入——它连事件监听都不参与。
所以必须搭配 JS 校验：
- 监听
input事件，用/^\d*\.?\d*$/.test(e.target.value)检查 decimal 场景 - 注意：用户长按粘贴可能绕过键盘限制，
inputmode不提供防护能力 - 某些安卓键盘（如三星）会把
inputmode="decimal"显示为数字键盘但允许输入逗号（,），需统一转点号处理
实际项目里最容易被忽略的是：不同厂商键盘对同一 inputmode 值的实现差异极大，尤其在小众 Android 定制系统上，有时连 numeric 都不弹出数字键盘。真要保底，还是得靠 type + JS 拦截 + 后端兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
