min和max仅提供语义约束与提交校验，无法实时拦截越界输入；需监听input事件，用parsefloat解析并截断非法值，结合step做偏移取整，同时保留原属性作为降级兜底。
input type="number" 本身支持 min 和 max 属性，但仅靠它们无法真正阻止用户输入越界值——比如手动输入、粘贴、或用键盘上下键绕过限制。浏览器只在表单提交时校验，且部分浏览器（如 Safari）对 step 和 min/max 的联动处理不一致。
为什么 min 和 max 不够用
常见现象：用户在输入框里直接敲出 999，即使设了 max="100"，输入框仍显示该值；点击提交才报错，体验割裂。更糟的是，某些安卓 WebView 或旧版 Edge 会忽略 min/max，连提交校验都不触发。
-
min/max是语义约束，不是输入拦截 - 键盘上下箭头可能跳过
max（尤其当step不匹配时） - 粘贴文本（如 "abc" 或 "12345"）完全绕过属性校验
用 input 事件实时截断越界值
监听 input 事件，在值变化后立刻归正，比等提交再提示更及时。注意必须用 input 而非 change，后者只在失焦时触发。
<input type="number" id="age" min="1" max="120"><script>
const el = document.getElementById('age');
el.addEventListener('input', () => {
const val = parseFloat(el.value);
if (isNaN(val)) return;
if (val < el.min) el.value = el.min;
if (val > el.max) el.value = el.max;
});
</script>
- 用
parseFloat而非parseInt，兼容小数（如step="0.1"） - 先判
isNaN，避免空值或非数字字符串（如 "12a"）导致NaN > 120为false被放过 - 直接赋值
el.value会触发新一轮input事件，但因值已合规，不会无限循环
补充 step 避免精度错位
如果设了 min="0" max="10" step="2"，但用户输 "3"，浏览器不会自动四舍五入到 "2" 或 "4"——step 只影响上下箭头行为，不影响手动输入。若业务要求严格步进，需在 input 事件里做取整：
if (el.step && el.step !== 'any') {
const step = parseFloat(el.step);
const base = parseFloat(el.min) || 0;
const rounded = Math.round((val - base) / step) * step + base;
el.value = Math.max(el.min, Math.min(el.max, rounded));
}
-
step="any"表示允许任意精度，此时跳过取整逻辑 - 取整必须基于
min偏移计算，否则step="2"+min="1"时，"3" 应合法，"4" 才越界 - 别忘了再套一层
Math.max/min，防止取整后意外突破边界
最易被忽略的点：移动端软键盘弹出后，用户可能快速连续输入，input 事件频率高，但上述逻辑足够轻量；真正要防的是用户禁用 JS 后的降级——所以 min/max 仍要保留，作为基础语义和提交校验兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
