ios中type="number"无法稳定唤起数字键盘，因其被解释为含小数点、负号的数值输入；最稳妥方案是type="text"配合inputmode="decimal"与pattern校验。
input type="number" 在 iOS 上为什么弹不出数字键盘
直接写 type="number" 在 iOS Safari 中大概率触发的是默认键盘（带字母），而不是纯数字键盘。这不是 bug，而是 iOS 的设计逻辑：它把 type="number" 解释为“可能含小数点、负号、e 的数值输入”，所以优先展示全功能键盘以保兼容性。
真正能稳定唤起数字键盘的，是 type="tel" —— iOS 会把它当作电话号码处理，强制弹出带数字和 *# 的键盘；Android 多数浏览器也识别并给出数字布局，但要注意语义偏离。
- 别用
type="number"仅为了调起数字键盘，它在 iOS 上不可靠 -
type="tel"是目前最稳妥的“数字键盘触发器”，即使输入内容不是电话号 - 若必须保留数值语义（比如要校验、要参与计算），得配合
inputmode="decimal"+pattern="[0-9]*"组合使用（见下一条）
inputmode 属性才是现代移动端数字键盘的控制开关
inputmode 是 HTML5.2 引入的专门控制软键盘类型的属性，比 type 更精准。它不改变表单语义或提交行为，只告诉浏览器“用户接下来想输什么”。iOS 12.2+ 和 Android Chrome 71+ 均支持。
常见取值中，inputmode="numeric" 对应整数键盘，inputmode="decimal" 对应带小数点的数字键盘（iOS 会显示 . ，Android 通常显示 , ，但实际都接受 . 作为小数分隔符）。
- 搭配
type="text"使用最安全：<input type="text" inputmode="decimal" pattern="[0-9.]*"> -
pattern不影响键盘类型，但能限制粘贴/手动输入的内容，避免非法字符混入 - 不要同时设
type="number"和inputmode="decimal"：iOS 会忽略inputmode，仍走type的默认逻辑 - 注意：Safari 对
inputmode="numeric"支持略差，部分版本仍弹出默认键盘，decimal稳定性更高
防误触：禁止缩放 + 禁止长按菜单 + 防止空格粘贴
数字输入框常被用户长按唤出“粘贴”“选择”等菜单，干扰操作；iOS 还会在双击时缩放页面。这些都不是键盘问题，但严重影响数字输入体验。
- 加
user-scalable=no到 viewport meta 中（虽然 deprecated，但 iOS 仍认） - 用 CSS 禁用长按菜单：
input { -webkit-user-select: none; user-select: none; } - 监听
paste事件过滤空格、逗号、中文数字等非数字字符：event.clipboardData.getData('text').replace(/[^0-9.-]/g, '') - 对
keydown做拦截更彻底：阻止event.key === ' '、'q'、'e'等非数字键（但别拦Backspace、Tab、Enter）
兼容性兜底与服务端校验不能省
无论前端怎么优化，用户总能绕过限制：改 DOM、禁用 JS、用桌面浏览器调试工具测试。移动端键盘只是体验层，不是安全层。
- 前端所有
pattern、inputmode、JS 拦截都可被跳过，服务端必须重新校验格式和范围 - 例如金额字段，前端用
inputmode="decimal"，服务端仍要检查是否为合法浮点数、是否超限、是否含非法 Unicode 字符（如全角数字） - Android 各厂商定制键盘差异大（华为/小米/OPPO），有些根本不响应
inputmode，此时type="tel"反而更普适 - 真要兼顾语义、校验、键盘三者，推荐组合：
<input type="text" inputmode="decimal" pattern="^\d*\.?\d*$" aria-label="请输入金额">，再配 JS 格式化和后端双重守门
键盘类型只是第一道门，后面每道门都得自己亲手锁好。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
