step属性不触发事件，仅影响input.validity.stepmismatch状态；该状态在失焦、提交或调用checkvalidity()时更新，change事件配合checkvalidity()是最实用的监听组合。
step 属性本身不触发事件，但会改变 input.validity.stepMismatch 状态
浏览器不会为 step 变化或步进操作单独派发事件。它只在表单约束校验时影响 validity 对象——具体是 input.validity.stepMismatch 布尔值。这个值在用户点击箭头、失焦、提交或调用 checkValidity() 时才被计算并更新。
这意味着你不能监听“用户刚点了上箭头”这种动作，但可以可靠捕获“当前值违反了 step 规则”这一结果。
-
input事件：值变化即触发，但此时validity.stepMismatch还未更新（比如用户粘贴了 2.05 到step="0.1"的框里，input事件中validity.stepMismatch仍为false） -
change事件：更稳妥，发生在失焦或箭头操作后，此时validity.stepMismatch已准确反映校验结果 -
invalid事件：仅当浏览器判定字段非法且准备显示默认提示时触发（如提交前），但不保证每次 step 不匹配都触发（例如用户还没失焦就直接提交）
监听 change 事件 + checkValidity() 是最实用的组合
想在用户完成一次输入/调节后立刻响应 step 合法性，应优先用 change 事件，并主动调用 checkValidity() 确认状态。
示例场景：金额输入框要求两位小数，step="0.01"，用户粘贴了 "123.456"，你希望自动截断到 "123.45" 而非等提交报错：
const amountInput = document.querySelector('input[name="amount"]');
amountInput.addEventListener('change', () => {
if (!amountInput.checkValidity()) {
if (amountInput.validity.stepMismatch) {
const min = parseFloat(amountInput.min) || 0;
const step = parseFloat(amountInput.step) || 1;
// 对齐到最近合法值（避免浮点误差）
const aligned = Math.round((parseFloat(amountInput.value) - min) / step) * step + min;
amountInput.value = aligned.toFixed(2);
}
}
});
- 不要依赖
input事件做即时修正——它太早，validity还没刷新 - 不要硬写
value % step === 0，必须用(value - min) % step并加浮点容差（如Math.abs(((v - min) / step) % 1) ） -
checkValidity()是同步调用，无性能负担，比等表单 submit 更早干预
submit 事件里必须二次校验，因为 stepMismatch 可被绕过
用户可通过粘贴、拖动 range 滑块、或 JS 直接赋值绕过浏览器对 step 的实时限制。因此 submit 时不能只信 form.checkValidity()，需手动验证逻辑是否真满足步进规则。
-
form.checkValidity()会触发所有字段的原生校验，包括stepMismatch，但它依赖浏览器实现——旧版 Android 浏览器可能完全忽略step - 更安全的做法：在
submit事件处理器中，对每个number输入框重新计算(value - min) / step是否接近整数 - 尤其注意：若后端按“必须是 step 的整数倍”解析，前端却只靠
checkValidity()，可能因浏览器兼容性漏掉非法值
range 输入的滑动过程无法监听“步进点切换”，只能监听最终值
input type="range" 的 step 控制的是可停靠的刻度点，但滑动本身是连续的。浏览器在 input 事件中报告的 value 是四舍五入后的合法值，而非原始拖动位置。
这意味着你无法知道“用户刚刚跨过了 5.0 这个点”，只能拿到最终停在 5.0 或 5.5 的结果：
const slider = document.querySelector('input[type="range"]');
slider.addEventListener('input', () => {
// 此时 slider.value 已是符合 step 的值（如 min="0" step="0.5" → 只能是 0, 0.5, 1.0...）
console.log(slider.value); // 不会出现 0.3 或 0.7
});
- 别试图用
mousemove或touchmove拦截原始滑动——浏览器已屏蔽中间非法值 - 若需“滑过某点时触发效果”，得自己维护一个上次合法值变量，对比前后
value是否跳变 -
output标签同步更新时，也应基于这个已对齐的value，而非原始输入
实际项目中最容易被忽略的，是认为设了 step 就等于“值永远合法”——它只约束用户交互路径，不保护 JS 赋值或旧浏览器环境。真正的步进保障，始终需要 JS 层的显式对齐与服务端兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
