ios上type="number"弹出字母键盘是因为其仅作提示性实现，需同时满足无非数字约束和值可解析为有效数字；推荐type="text"+inputmode="numeric"组合，并注意微信等环境需fallback为type="tel"。
input type="number" 为什么在 iOS 上还是弹出字母键盘
因为 iOS Safari 对 type="number 的实现是「提示性」而非强制性的：它只在满足特定条件时才触发数字键盘，否则回落到默认键盘。Android 浏览器表现稍好，但也不完全一致。
关键判断条件是：输入框必须同时满足「无非数字字符约束」+「值可被解析为有效数字」。只要 input 上存在 pattern、min/max 范围限制过严、或初始 value 包含空格/符号（如 "123.00" 中的点），iOS 就可能放弃数字键盘。
- 去掉
pattern属性（尤其避免pattern="[0-9]*"这类冗余写法） - 确保
min、max、step值语义合理（例如金额用step="0.01"，整数用step="1"） - 初始
value留空或设为纯数字字符串（value="0"可以，value=""更稳妥） - 避免给
input设置inputmode="text"或其他覆盖行为的属性
inputmode="numeric" 和 type="number" 到底该用哪个
inputmode 是更现代、更可控的方案，它直接告诉浏览器「用户预期输入什么类型的内容」，不改变表单验证逻辑。而 type="number" 会附带验证、上下箭头、自动格式化等副作用，反而容易干扰移动端体验。
推荐组合：type="text" + inputmode="numeric" —— 它在 iOS 和 Android 主流浏览器中都能稳定唤起数字键盘，且不会触发 change 事件的奇怪时机问题（type="number" 在失焦时才触发）。
<input type="text" inputmode="numeric" pattern="[0-9]*" autocomplete="off">
注意：pattern="[0-9]*" 在这里仅作辅助（防止粘贴非法字符），不是唤起键盘的必要条件；autocomplete="off" 可减少键盘上方出现邮箱/地址等干扰建议。
需要小数点怎么办？inputmode="decimal" 不生效
inputmode="decimal" 在 iOS 16.4+ 和较新 Android 版本才被支持，旧版 iOS（尤其是 15.x）会直接忽略它，回落到默认键盘。所以不能单独依赖这个值。
稳妥做法是：仍用 inputmode="numeric"，配合 JS 拦截和格式化：
- 监听
input事件，用正则/^\d*\.?\d{0,2}$/控制最多两位小数 - 禁用长按粘贴（
onpaste="return false"）或劫持粘贴内容做清洗 - 不要依赖
type="number"的step="0.01"，它在 iOS 上常导致小数点无法输入
如果业务强依赖小数输入（如价格），建议加一个轻量级格式化函数，在用户结束输入后自动补零或截断，而不是卡在输入过程中。
微信内置浏览器的特殊处理
微信 iOS 客户端（基于 WKWebView）对 inputmode 支持滞后，某些版本下 inputmode="numeric" 完全无效。此时唯一可靠 fallback 是 type="tel" —— 它会调出带数字键的键盘（含 * 和 #），虽不完美，但数字区域完整可用。
但要注意：type="tel" 会禁用 HTML5 验证，且提交时值仍是字符串，需后端或 JS 做类型转换；另外要加 pattern="[0-9]*" 和 inputmode="numeric" 兼容其他环境：
<input type="tel" inputmode="numeric" pattern="[0-9]*" autocomplete="off">
这种写法在微信里大概率生效，在其他环境也能优雅降级。别指望一次配置通吃所有 WebView，移动端表单键盘控制本质是「概率性适配」。
最易被忽略的一点：哪怕所有属性都写对了，如果父容器有 transform、fixed 定位或 zoom 缩放，某些安卓 WebView 也会拒绝唤起数字键盘——务必在真实设备上逐项排查样式影响。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
