min/max属性仅用于提交校验和箭头交互不拦截手动输入需用input事件实时修正数值、处理NaN、缓存lastValid值并配合服务端校验。min和max属性本身不拦截手动输入只参与表单提交校验和箭头交互逻辑。真要拦住超限值必须加 JavaScript 实时修正。为什么直接写min0max100还能输 999浏览器只把min/max当作“提交时校验依据”不是输入过滤器。用户粘贴、键盘敲击、拖动滑块都可能绕过——尤其在 Safari 和多数安卓 WebView 中连箭头增减都可能失效。属性值必须是字符串比如min0不能写成min0无引号或min{0}JSX 语法若input的type不是numbermin/max完全被忽略连valueAsNumber都读不到约束空值、-、.等中间态字符串不会触发校验parseFloat()返回NaN得单独处理怎么用input事件实时截断非法输入监听input事件比change更及时能覆盖每次按键、粘贴、删除。核心是读值 → 转数值 → 比对边界 → 强制赋值。用event.target.valueAsNumber替代parseFloat()它对空值、非法字符串返回NaN更可靠边界判断前先检查isNaN(val)避免NaN 0返回false导致静默失败修正时别直接el.value min应先缓存上一次合法值lastValid否则连续删光再输会卡死移动端 iOS 键盘不响应step但input事件仍有效可一并处理步长对齐如min1step2下输入 4 应取整为 5step不配min就会出问题step的合法序列从min开始计算不是从 0。没设min时默认起点是 0会导致第一档值比如step0.5下的 0不符合业务预期甚至让箭头按钮失灵。错误写法input typenumber step0.5→ 允许输入 0但 0 可能不在业务允许范围内正确写法input typenumber min0.5 max10 step0.5→ 合法值为 0.5、1.0、1.5…stepany会关闭所有步长约束退化为纯文本输入min/max仅剩提交校验作用Safari 对step的实时校验宽松必须靠 JS 补足输入后用Math.round((val - min) / step) * step min对齐真正安全的数字输入框从来不是靠 HTML 属性堆出来的。min和max是提示input事件是防线而服务端校验才是最后一道锁——三者缺一不可。最常被忽略的是没处理NaN和没缓存lastValid导致输入框在清空后无法恢复或者连续触发两次校验陷入死循环。
