通过 javascript 监听 `input` 事件，实时校验并截断超出 `max` 属性范围的数值输入，确保用户无法在 `` 中键入大于设定上限的值。
在 HTML 中使用 <input type="number"> 时，浏览器原生支持 min 和 max 属性，但仅对点击上下箭头、滚动或粘贴操作生效；用户仍可通过键盘直接输入（如键入 6、999）绕过限制。要实现真正可靠的数值边界控制，需借助 JavaScript 进行实时校验。
以下是一个轻量、兼容性良好的解决方案：
<input type="number" id="quantity" name="quantity" min="0" max="5">
<script>
document.addEventListener("DOMContentLoaded", () => {
const el = document.querySelector('#quantity');
el.addEventListener('input', function() {
const value = this.value.trim();
const max = parseFloat(this.getAttribute('max'));
// 清空非法输入（如空格、非数字字符）
if (!value || isNaN(parseFloat(value))) {
this.value = '';
return;
}
const num = parseFloat(value);
// 超出最大值则强制设为 max；注意：保留整数逻辑（如 max=5 时不允许 5.1）
if (num > max) {
this.value = String(Math.floor(max)); // 或 Math.round(max)，按需调整
}
// 可选：自动修正小数位（如 max 是整数，禁止小数输入）
if (Number.isInteger(max) && value.includes('.')) {
this.value = String(Math.floor(num));
}
});
});
</script>✅ 关键说明：
- 使用 input 事件（而非 change）实现实时响应，覆盖按键、粘贴、拖拽等所有输入方式；
- parseFloat() 容忍前导空格和部分格式（如 " 5.0 "），isNaN() 精准识别无效数值；
- 若 max 为整数（如 5），建议同步限制小数输入，避免出现 5.7 等越界值；
- 不推荐用 keydown/keypress 拦截——易误伤合法输入（如负号、小数点、复制粘贴），且移动端兼容性差。
⚠️ 注意事项：
- 始终在服务端再次校验该字段，前端限制仅为用户体验优化，不可替代后端安全验证；
- 若需支持负数，请同步检查 min 并做对称处理；
- 在 Vue/React 等框架中，应优先使用响应式绑定 + 计算属性控制，而非直接操作 DOM。
该方案无需依赖外部库，适用于所有现代浏览器，是增强原生 <input type="number"> 行为的简洁可靠实践。
