step属性仅控制合法输入值与上下箭头/滚轮操作的最小变化量，不自动截断或对齐用户输入；实现百位递增需配合javascript监听input事件并修正数值，同时保留step="100"以支持原生交互与验证。
step 属性本身不支持百位递增的数值逻辑
step 是原生 HTML <input type="number"> 的属性，它只控制「合法输入值」与「上下箭头/滚轮操作」的最小变化量，但不会自动对用户输入做截断或对齐。比如设 step="100"，用户仍可手动输入 123，浏览器不会阻止——它只在表单验证、点击上下箭头、或调用 stepUp()/stepDown() 时起作用。
想让输入框“真正按百位递增”，必须配合 JavaScript 拦截和修正
单纯靠 step="100" 不够，常见做法是监听 input 或 change 事件，把用户输入值四舍五入（或向下/向上取整）到最近的百位倍数：
const input = document.querySelector('input[type="number"]');
input.addEventListener('input', () => {
const val = Number(input.value);
if (!isNaN(val)) {
// 四舍五入到最近的百位：Math.round(val / 100) * 100
// 或强制向下取整（更符合“百位递增”直觉）：
const rounded = Math.floor(val / 100) * 100;
if (rounded !== val) {
input.value = rounded;
}
}
});
注意：input 事件会高频触发，如果还要兼容粘贴（paste）、拖拽等场景，建议加防抖或同时监听 blur 做兜底校验。
使用 step="100" 仍有必要，但只是辅助验证
即使加了 JS 修正，保留 step="100" 仍有实际价值：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 点击输入框右侧上下箭头时，每次增减 100
- 鼠标滚轮滚动时默认按
step增减（部分浏览器支持） - 表单提交前，若用户绕过 JS 输入了非法值（如 150），
checkValidity()会返回false，reportValidity()可触发原生提示 - 屏幕阅读器等辅助技术会据此理解数值粒度
小心边界情况：负数、小数、空值和初始值
直接用 Math.floor(val / 100) * 100 处理负数会出错（例如 -150 → -200，但你可能期望 -100）。更安全的做法是用 Math.round 或自定义对齐函数：
// 对齐到最近的百位（正负一致） const alignToHundred = v => Math.round(v / 100) * 100; <p>// 或始终向上对齐（如价格“至少 100 起”） const ceilToHundred = v => Math.ceil(v / 100) * 100;</p>
另外，要处理空字符串、非数字输入、以及 valueAsNumber 为 NaN 的情况；初始值如果不是百位倍数，也建议在 DOMContentLoaded 时主动修正一次，避免视觉与逻辑不一致。
真正在意数值精度和交互反馈的场景，别指望 step 独立扛事——它只是个提示和约束开关，核心逻辑得自己写清楚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
