input type="number" 的 min 和 max 属性仅在表单提交或调用 checkValidity() 时校验，不实时拦截键盘输入；需用 JS 监听 input 事件，通过 valueAsNumber 获取数值并截断越界值，确保真正“卡住”超限输入。
input type="number" 的 min 和 max 属性是否生效
生效，但仅在表单提交时由浏览器强制校验，且不阻止用户手动输入超限值——min 和 max 是语义约束，不是实时拦截。用户仍可输入 999 即使 max="100"，直到点击提交或调用 checkValidity() 才报错。
为什么输入框里能输超限数字却没提示
因为浏览器默认只对 input[type="number"] 的“上下箭头”操作做范围限制，键盘输入不受控。常见错误现象：value 变成字符串（如 "150"），但 validity.rangeOverflow 或 validity.rangeUnderflow 在失去焦点前不触发。
- 必须配合
oninput或onblur手动校验并修正 -
step缺省为 1，若设为step="0.1"而用户输整数，可能意外触发validity.stepMismatch - 某些旧版 Safari 对
min/max支持不一致，建议加 JS 回退
如何让数字输入框真正“卡住”超限值
靠 HTML 属性做不到，得用 JS 监听并截断。核心思路：在 input 事件中解析数值，越界则重置为边界值，并同步 value 和 valueAsNumber。
<input type="number" id="age" min="0" max="120">
<script>
const el = document.getElementById('age');
el.addEventListener('input', () => {
const min = el.min ? parseFloat(el.min) : -Infinity;
const max = el.max ? parseFloat(el.max) : Infinity;
const val = el.valueAsNumber;
if (!isNaN(val)) {
if (val < min) el.valueAsNumber = min;
else if (val > max) el.valueAsNumber = max;
}
});
</script>
注意 valueAsNumber 和 value 的区别
valueAsNumber 返回数字类型（非法时为 NaN），value 始终是字符串。直接赋值 el.value = "10" 不会更新 valueAsNumber 的内部状态；而 el.valueAsNumber = 10 会同时更新两者。容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 用
parseInt(el.value)替代el.valueAsNumber，结果在小数场景出错（如输入"3.14"） - 在
change事件里读valueAsNumber，但用户删空输入框时它返回NaN，需额外判断 - 服务端永远要二次校验，前端限制可被绕过
min 和 max 是提示性护栏，真要卡死，得自己写逻辑盯住 input 事件。 
