应使用type="text" + inputmode="decimal"（或"numeric"）组合替代type="number"，以确保移动端稳定弹出数字键盘；需配合pattern、js过滤及事件监听防止非法输入。
input type="number" 为什么没弹出数字键盘
在移动端，input type="number" 并不总能触发原生数字键盘——iOS Safari 会弹出带小数点和负号的“数字键盘”，而 Android 多数浏览器（如 Chrome）可能仍显示默认键盘，除非额外加 inputmode。
真正可控、广泛兼容的方式是组合使用：type="text" + inputmode="decimal"（或 "numeric"），再配合 pattern 和 inputmode 的语义化声明。
-
inputmode="numeric"：纯整数场景（如手机号、ID），Android 和 iOS 均倾向弹出无小数点的数字键盘 -
inputmode="decimal"：允许小数（如金额、体重），iOS 显示带小数点的键盘，Android 行为更一致 - 避免只用
type="number"：它会引入 spinner、自动格式化（如千分位）、提交时强制转 Number 类型，反而干扰表单逻辑 -
pattern="[0-9]*"或pattern="\d*"可辅助提示，但不强制校验；真正校验应靠 JS 或后端
Android 和 iOS 的 inputmode 行为差异
inputmode 是 HTML5 标准属性，但各平台实现程度不同。iOS 12.2+ 支持 numeric/decimal，Android Chrome 76+ 基本支持，但旧版 WebView（如微信内置浏览器）可能忽略它。
- 测试发现：微信安卓版（v8.0.4x）中
inputmode="decimal"有效，但inputmode="numeric"有时回落到默认键盘 - 安全做法：优先用
inputmode="decimal"，再通过 JS 拦截非数字输入（如event.key.match(/[^0-9.]/)） - 不要依赖
type="tel"模拟数字键盘：它会唤起带 *# 键的拨号盘，且无小数点
如何防止用户粘贴非数字内容
即使键盘正确，用户仍可通过长按粘贴乱码（如 “12.34元”、“$50”）。仅靠属性无法拦截，必须用事件监听。
<input type="text" inputmode="decimal" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1')">
-
oninput比onchange更及时，能实时过滤 - 正则
/[^0-9.]/g删掉所有非数字和小数点字符 -
/(\..*)\./g防止出现多个小数点（保留第一个） - 注意：该写法不处理开头小数点（如 “.5”），如需严格校验，建议用
parseFloat()+ 空值判断
为什么不用 CSS 或 JavaScript 模拟键盘
有人想用 contenteditable + 自定义软键盘，这完全没必要，也违背可访问性原则。
- 原生数字键盘自带语音输入、光标操作、无障碍支持（如 VoiceOver 读出“数字键盘已打开”）
- 自研键盘要处理 iOS 键盘高度变化、输入焦点丢失、横竖屏切换，维护成本极高
- 多数场景只需“让用户方便输数字”，不是“控制每一个按键行为”——让浏览器和系统做它该做的事
最常被忽略的是：inputmode 必须搭配 type="text" 才稳定生效；单独写 type="number" 时，iOS 会优先按 type 解析，直接忽略 inputmode。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
