本文介绍通过原生 javascript 监听 `input` 事件，实时校验并自动修正超出 `max` 属性限制的用户手动输入，确保 `` 在键盘输入场景下与上下箭头行为一致。

HTML 原生的 元素虽支持 min 和 max 属性，但仅对点击上下箭头、滚轮调节及部分浏览器的粘贴行为生效；当用户直接键盘输入（如输入 6、999 或负数）时，浏览器默认不会阻止或截断——这会导致表单数据违反业务逻辑（例如库存数量不能超限）。

解决方法是使用 JavaScript 在 input 事件中动态校验并修正值。以下为推荐实现（兼容现代浏览器，无需框架）：

✅ 关键说明：

• 使用 input（而非 change）事件确保实时响应，用户每敲一个键即校验；
• parseFloat() 容忍前导/尾随空格及小数点，比 parseInt() 更健壮；
• 显式处理 NaN 和空值，避免异常输入残留；
• 同时约束下限（min="0"），提升完整性；
• 无需修改 HTML 结构，与服务端变量（如 PHP 的 $the_quantity_required）无缝集成。

⚠️ 注意事项：

• 此方案不替代服务端验证——所有关键业务规则（如库存上限）必须在后端二次校验；
• 移动端软键盘可能触发 input 事件延迟，建议配合 blur 事件做最终兜底（可选）；
• 若需支持小数，确保 max 属性值含小数位（如 max="5.5"），且逻辑中保留精度处理。

通过这一轻量级脚本，即可让数字输入框在所有输入方式下严格遵循 min/max 约束，兼顾用户体验与数据可靠性。