max属性在number输入框中不实时拦截输入，仅在校验阶段生效；需通过input事件结合parseFloat和Math.min/max手动截断，并在Vue中避免直接操作DOM导致响应式脱节。
max 属性在 type="number" 的 input 上“失效”，不是 bug，而是它本来就不负责实时拦截——浏览器只在校验阶段（比如 form.checkValidity() 或提交时）才触发约束，用户仍可输入 999，value 依然会被赋值为 "999"。
为什么原生 max 不阻止超限输入
原生 input[type="number"] 的 max 仅影响三件事：步进按钮点击范围、表单提交校验、checkValidity() 返回值。它不监听键盘输入、不截断粘贴、也不过滤 oninput 事件中的非法值。
常见错误现象：
- 用户手动输入
150（超出max="100"），input.value仍是"150" - 用
Ctrl+V粘贴一长串数字，完全绕过限制 - 旧版 Safari 中
max甚至不触发任何校验提示
用 input 事件做实时截断（最常用）
监听 input 事件，在每次输入后立刻判断并修正值，这是最直接、兼容性最好的方式。
立即学习“前端免费学习笔记（深入）”；
- 必须用
parseFloat()转数值再比较，避免字符串比较（"10" > "99"成立） - 修正后要显式赋值给
input.value，否则 DOM 不更新 - 注意空值、
"-"、"."等非数字前缀，parseFloat()会返回NaN，需额外处理
示例：
<input type="number" id="age" min="0" max="120">
<script>
const input = document.getElementById('age');
input.addEventListener('input', () => {
const val = parseFloat(input.value);
if (!isNaN(val)) {
if (val < parseFloat(input.min)) input.value = input.min;
if (val > parseFloat(input.max)) input.value = input.max;
}
});
</script>
Vue 场景下别直接改 v-model 绑定值
在 Vue + Element UI 或原生 v-model 中，直接操作 input.value 可能导致响应式脱节，尤其当绑定的是 Number 类型变量时。
- 推荐在
@input或@change中处理，用Math.min()/Math.max()截断后重新赋值给绑定变量 - 避免在
watch中反向写回 DOM，容易引发循环更新 - Element UI 的
el-input不支持min/max属性，强行传入会被忽略，必须自己实现逻辑
Vue 示例（组合式 API）：
<el-input v-model.number="age" type="number" @input="clampAge" />
<script setup>
const age = ref(0);
const clampAge = () => {
age.value = Math.min(120, Math.max(0, age.value));
};
</script>
服务端必须二次校验，前端限制纯属体验优化
所有前端限制都可被绕过：禁用 JS、手动修改 DOM、curl 提交……所以 max 的实际作用只是降低用户误操作概率。
- 后端收到值后，仍需用相同逻辑校验（如
if (age < 0 || age > 120) throw error） - 不要依赖
step="1"防小数——用户仍可输入10.5，除非你同时限制小数位数 - 若业务要求严格精度（如金额保留两位小数），得配合正则或
toFixed(2)处理，不能只靠max
真正容易被忽略的点是：很多人把 max="100" 当成“输入框只能输到 100”，但其实它连 "1000" 的第一个字符 "1" 都不会拦——限制永远发生在值已进入 DOM 之后，而不是输入过程中。
