iOS Safari 不支持 inputmode="decimal",会降级为默认键盘;需用 type="text" + pattern="[0-9.]*" 触发带小数点的数字键盘,并配合 JS 过滤非法字符。

inputmode="decimal" 在 iOS 上根本不会弹出带小数点的数字键盘
直接说结论:inputmode="decimal" 在当前(iOS 17.5 / Safari 17.5)仍不被支持——它会被 Safari 完全忽略,最终 fallback 到默认键盘(通常是字母键盘或 inputmode="numeric" 的纯数字键盘)。你输不了小数点,不是代码写错了,是系统压根没响应这个属性。
真正能触发「带小数点的数字键盘」的,只有 inputmode="numeric" + type="text" 组合,并配合 pattern="[0-9]*"(iOS 专属 hack),但仍有明显限制:
- iOS 仅在
type="text"下识别pattern触发数字键盘;type="number"反而会禁用小数点输入(尤其在微信内嵌 WebView) -
inputmode="numeric"在 Android Chrome 上表现正常,会弹出含小数点的数字键盘 -
inputmode="decimal"在 Chrome Desktop、Android Chrome 120+ 已支持,但 iOS Safari 至今无计划支持(Apple WebKit Bug #247169 仍 Open)
怎么让 iOS 用户能方便输入小数?绕过 inputmode 的实际方案
别依赖 inputmode,用组合策略保底:
- 用
<input type="text" inputmode="numeric" pattern="[0-9.]*" inputmode="decimal">—— 多写一个inputmode="decimal"不影响,但关键靠pattern触发 iOS 数字键盘 - 监听
input事件,用正则过滤非法字符:value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1'),防止粘贴进多个小数点 - 对
type="number"做降级:iOS 下强制改回type="text",再补上pattern和inputmode - 不要设
step="any"或step="0.01"—— iOStype="number"会直接屏蔽小数点键,哪怕你写了inputmode
为什么 type="number" 在微信和 Safari 里输不了小数点?
这不是 bug,是 WebKit 和微信 X5 内核的明确行为:当 type="number" 且未指定 step 或 step="1" 时,它们只允许整数输入;即使写了 step="0.1",部分版本仍会忽略小数点按键(尤其是长按句号键不出小数点)。
立即学习“前端免费学习笔记(深入)”;
典型现象:console.log(event.data) 拿不到小数点,input 事件也不触发。这时候强行用 JS 插入 . 会破坏光标位置,体验极差。
- 微信 iOS 客户端(X5 内核)对
type="number"的限制比 Safari 更严 - Safari 会把
type="number"渲染成带上下箭头的控件,但箭头操作无法精确到小数,反而干扰用户 - 唯一稳妥路径:放弃
type="number",用type="text"+ 自行校验 + 格式化显示
要不要用 inputmode="decimal"?现在怎么写才不踩坑
可以写,但必须当成「增强提示」而非功能依赖。它的作用只是告诉支持的浏览器(如 Chrome Desktop)优先启用小数键盘,对 iOS 零影响。
- 推荐写法:
<input type="text" inputmode="decimal" pattern="[0-9.]*" maxlength="12"> - JS 校验必须同步做:
parseFloat(value) || 0转数值,再检查是否在合理范围内(比如金额不超 99999999.99) - 视觉上可加「¥」或「元」后缀,但别用
suffix属性(不存在),用伪元素或外层包裹更可控 - 如果项目需高精度小数(如科学计算),干脆上自定义软键盘组件,彻底摆脱系统键盘限制
最麻烦的从来不是写法,而是测试覆盖:iOS 各版本、微信各版本、QQ 浏览器、Chrome for iOS……它们对同一组属性的解析差异,比文档写的多得多。



















