step属性控制合法值的步长基准,与min/max共同定义等差数列集合;浏览器不拦截非法输入,仅在提交验证或读取valueAsNumber时生效。

input type="number" 的 step 属性到底控制什么
step 不是“限制用户只能输整数”,而是定义合法值的步长基准,配合 min 和 max 共同构成一个等差数列集合:{min, min + step, min + 2×step, …}。浏览器数字键盘(如 iOS Safari 的数字键盘、Android Chrome 的 number 键盘)只负责提供输入入口,**不主动校验或拦截非法值**;真正起作用的是表单提交时的原生约束验证,或 JS 手动读取 valueAsNumber 时的解析逻辑。
为什么设了 step="1" 还能输入小数
这是常见误解。只要没加 min/max 或没触发验证,用户完全可以通过软键盘直接输入 "3.14" —— 浏览器不会阻止。只有在以下情况才会生效:
- 用户点击上下箭头按钮(
type="number"自带的微调器),此时值严格按step增减 - 表单提交时触发
checkValidity(),若当前值不在合法序列中(如min="0" step="1" value="2.5"),会报错"The value must be a valid number." - JS 中访问
input.valueAsNumber,非法值返回NaN(例如step="1"但输入"2.3")
step="any" 和 step="0.01" 的实际区别
两者都允许小数,但行为不同:
-
step="any":禁用原生数值校验,valueAsNumber仍可解析合法浮点数(如"1.234"→1.234),但提交时不检查是否符合步长 -
step="0.01":要求所有合法值必须是百分位对齐的数(如1.00、1.99、2.00),1.005或1.001都算非法(即使显示正常) - 注意浮点精度问题:
step="0.1"在二进制下无法精确表示,可能导致valueAsNumber出现0.30000000000000004这类结果
移动端数字键盘不会因 step 改变按键布局
iOS 的 type="number" 键盘始终显示数字+小数点+负号,Android 各厂商键盘也基本一致。它**不根据 step 动态隐藏小数点键**——哪怕你设了 step="1",用户依然能点出小数点并输入 "5." 或 "7.0"。真正需要整数输入,得靠组合手段:
立即学习“前端免费学习笔记(深入)”;
- 加
pattern="\d*"+inputmode="numeric"(增强提示,非强制) - 监听
input事件,用正则过滤掉小数点:input.value = input.value.replace(/\D/g, '') - 提交前用
Math.round(parseFloat(input.value))强制取整(但要注意空值和 NaN)
最易被忽略的一点:step 对键盘本身毫无影响,它只参与数值合法性判定。想靠它“锁死”输入类型,必须搭配 JS 校验或服务端兜底 —— 浏览器永远信任用户输入的字符串,直到你明确去解析或验证它。



















