input[type="number"]的加减按钮不响应min/max/step边界是规范行为，仅在失焦或提交时校验；需手动监听input/change/keydown事件并用Math.round对齐步长、clamp截断值，同时补全无障碍支持。
用 input[type="number"] 时，为什么加减按钮不响应边界限制？
浏览器原生的 input[type="number"] 加减按钮（即上下箭头）默认会忽略 min、max 和 step 的约束，直到用户松开鼠标或失去焦点才校验——这意味着你可以一路点“+”把值推到 max 之外，再失焦时才被拉回。这不是 bug，是规范行为。
真正起作用的是表单提交时的约束验证，以及 JS 主动调用 checkValidity() 或监听 input 事件手动截断。所以别指望只靠 HTML 属性就让按钮“卡死”在边界。
- 必须监听
input或change事件做实时修正 -
step为小数时（如0.1），注意浮点精度问题，避免1.1 + 0.1 === 1.2000000000000002 - 移动端 Safari 对
input[type="number"]的箭头支持弱，常隐藏，实际依赖软键盘输入
手写加减按钮时，step 和 min/max 怎么参与计算？
手写按钮（两个 button）能完全掌控逻辑，但得自己实现步进、越界拦截和数值归一化。关键不是“加减”，而是“加完立刻判断是否越界，越界就停住或设为边界值”。
示例逻辑：
立即学习“前端免费学习笔记（深入）”；
function updateValue(delta) {
const input = document.getElementById('my-input');
let val = parseFloat(input.value) || 0;
const step = parseFloat(input.step) || 1;
const min = input.min ? parseFloat(input.min) : -Infinity;
const max = input.max ? parseFloat(input.max) : Infinity;
<p>// 先按 step 对齐（避免浮点误差）
const rounded = Math.round(val / step) <em> step;
const next = rounded + delta </em> step;</p><p>// 截断到 [min, max]
const clamped = Math.min(Math.max(next, min), max);
input.value = clamped;
}- 务必用
Math.round(val / step) * step对齐步长，否则0.1 + 0.1可能变成0.20000000000000004，后续比较失效 - 不要直接对
input.value字符串做+=，它会拼接成字符串（如"2" + 1 → "21"） - 设置
input.value后，记得触发input事件（如input.dispatchEvent(new Event('input'))），以便其他监听器响应
如何让键盘操作（↑↓）也遵守相同边界？
用户用方向键增减时，默认行为不受 min/max 约束，必须拦截 keydown 并阻止默认行为。
只需监听 keydown，识别 ArrowUp / ArrowDown，然后复用上面的 updateValue() 函数：
input.addEventListener('keydown', (e) => {
if (e.key === 'ArrowUp') {
e.preventDefault();
updateValue(1);
} else if (e.key === 'ArrowDown') {
e.preventDefault();
updateValue(-1);
}
});- 必须加
e.preventDefault()，否则原生方向键会触发光标移动或页面滚动 - 别忘了处理
PageUp/PageDown（可选，通常按 10×step 增减） - 组合键如
Shift+ArrowUp可设计为大步长（如 ×10），但需明确告知用户，否则易误触
无障碍（a11y）和 focus 管理容易被忽略什么？
纯按钮方案若没处理好 focus，键盘用户按 Tab 进入后无法用方向键操作，屏幕阅读器也无法识别当前值变化。原生 input[type="number"] 自带这些能力，手写时得补全。
- 加减按钮必须有
type="button"，否则表单提交时可能触发意外行为 - 按钮需有
aria-label（如aria-label="增加数值"），且随input.value动态更新（如 “当前值：3.5，增加”） - 每次按钮点击后，应保持
input获得 focus，方便连续操作；可用input.focus()实现 - 若禁用按钮（如已达
max），设disabled并同步更新aria-disabled="true"，否则屏幕阅读器仍会朗读为可操作
边界控制本身不难，难的是把鼠标、键盘、辅助技术三套交互路径都走通，且不让某一种方式“掉队”。多数线上组件库崩坏，就崩在这一步。
