<input type="number" step="0.01" min="0" max="99999" /> <!-- 或 --> <input type="text" inputmode="decimal" />
价格输入框填 1.5,失焦后浏览器弹出气泡:请输入有效值,最接近的两个有效值是 1 和 2。用户以为只能填整数,其实业务允许两位小数。这类现象通常不是突然出现的,往前翻半天日志能看到苗头。
追下去是这么回事:number 类型的默认 step 是 1,浏览器按步进值校验,1.5 不在 1 的整数倍上。页面又没有设置 step,原生校验就先把它拦下了。
「number 步进校验」改完先别急着全量,挑一台机器放半天,真有问题这段时间就能看出来。同类问题如果隔一段时间又出现,多半是某个定时任务或重启流程把改动冲掉了。
把这次用到的命令存进笔记,比记住结论有用,换个环境还能照着走。改完隔一天再看一次,当场正常不代表能稳住。
处理上按这个顺序:按精度设置 step,两位小数写 0.01,并补上 min 和 max;金额类输入改用 text 加 inputmode=decimal,避免滚轮误改数值;提交前统一换算成整数分再校验,别在浮点上比较。
确认没问题再收工,输入 1.5 和 99.99 都不再弹原生提示,提交后金额与填写值一致。
