17370845950

通过 javascript 监听 `input` 事件，实时校验并截断超出 `max` 属性范围的数值输入，确保用户无法在 `` 中键入大于设定上限的值。

在 HTML 中使用 时，浏览器原生支持 min 和 max 属性，但仅对点击上下箭头、滚动或粘贴操作生效；用户仍可通过键盘直接输入（如键入 6、999）绕过限制。要实现真正可靠的数值边界控制，需借助 JavaScript 进行实时校验。

以下是一个轻量、兼容性良好的解决方案：

✅ 关键说明：

• 使用 input 事件（而非 change）实现实时响应，覆盖按键、粘贴、拖拽等所有输入方式；
• parseFloat() 容忍前导空格和部分格式（如 " 5.0 "），isNaN() 精准识别无效数值；
• 若 max 为整数（如 5），建议同步限制小数输入，避免出现 5.7 等越界值；
• 不推荐用 keydown/keypress 拦截——易误伤合法输入（如负号、小数点、复制粘贴），且移动端兼容性差。

⚠️ 注意事项：

• 始终在服务端再次校验该字段，前端限制仅为用户体验优化，不可替代后端安全验证；
• 若需支持负数，请同步检查 min 并做对称处理；
• 在 Vue/React 等框架中，应优先使用响应式绑定 + 计算属性控制，而非直接操作 DOM。

该方案无需依赖外部库，适用于所有现代浏览器，是增强原生 行为的简洁可靠实践。