批量生成number输入框时必须显式声明step属性，且min/max/value/step需统一小数位字符串格式（如"0.01"），避免浏览器差异导致校验不一致、箭头失效或值漂移。
批量生成时 step 属性必须显式写，不能依赖浏览器推导
浏览器对 step 的默认行为极不一致：未声明 step 时，type="number" 在 Chrome 可能按 min 小数位自动设为 "0.1"，Firefox 却一律回退到 "1"。批量渲染（如 Vue v-for、React map、或服务端模板）若漏掉 step，同一组输入框在不同浏览器里会一个只接受整数、一个允许小数——用户填了 1.5，提交时一半人报错。
务必在模板中每处都显式写出 step 值，哪怕它看起来“多余”：
<input type="number" :min="item.min" :max="item.max" :step="item.step" v-model="item.value">
-
item.step必须是字符串（如"0.01"），不是数字0.01，否则 SSR 或某些框架可能序列化失败 - 若
item.step动态计算，确保它始终满足：非空、正数、且与min/max小数位对齐（例如min="0.00"就不能配step="0.1"） - 避免用
step="{{ item.precision === 'cents' ? '0.01' : '1' }}"这类模板表达式——部分旧版模板引擎不支持嵌套引号，直接崩渲染
动态 step 切换后 value 必须重算，否则 spinner 失效
批量列表里常有“单位切换”需求（如从“元”切到“分”），此时改 step 后，原 value 极大概率已非法：原来 value="1.99" + step="0.01" 是合法的，切到 step="1" 后，1.99 不再是 1 的整数倍，Chrome 会静默卡住 ↑ 按钮，Safari 可能直接跳到 1 或 2。
正确做法是：改 step 的同时，立刻重置 value 为最近合法值：
立即学习“前端免费学习笔记（深入）”；
function updateStep(input, newStep) {
input.setAttribute('step', newStep);
const current = parseFloat(input.value) || 0;
const min = parseFloat(input.min) || 0;
// 对齐到 min + n × step
const aligned = Math.round((current - min) / newStep) * newStep + min;
input.value = aligned.toFixed(getDecimalPlaces(newStep));
input.reportValidity(); // 主动触发校验提示
}- 别用
input.step = newStep直接赋值，部分浏览器不响应属性变更 -
toFixed()位数必须和newStep一致（step="0.01"→toFixed(2)），否则 DOM 中显示为"1.9900000000000002" - 批量操作时加
requestAnimationFrame包裹，防止连续切换导致状态错乱
step="any" 在批量场景下不是“放行”，而是“退化为整数步进”
很多人以为 step="any" 能让一组输入框自由输入任意小数，结果发现点击 ↑ 按钮还是 +1、-1——因为 step="any" 实际效果是：禁用步长校验，但上下箭头和 stepUp() 方法全部退化为 ±1 整数增减。
如果你要的是“手动输小数 + 箭头微调”，必须分开处理：
- 保持
step="0.01"（或其他实际粒度），保证箭头行为可控 - 用 JS 监听
input事件，对用户粘贴或手输的值做宽松校验（如允许"1.234"，内部存为parseFloat()） - 提交前统一规整：
Math.round(val / 0.01) * 0.01，而不是依赖浏览器校验 - 别在批量渲染中混用
step="any"和step="0.01"，视觉和行为割裂感极强
最易被忽略的点：min 值没对齐 step，整个序列就偏了
批量生成时容易把 min 写成整数（如 min="0"），但 step="0.01"，这会导致合法值从 0.00 开始，可如果初始 value="0.005"，浏览器会静默修正为 0.00 或 0.01，用户第一次点击 ↑ 就跳到 0.01 而不是预期的 0.005 → 0.015。
真正安全的做法是：所有 min、max、value、step 全部用相同小数位字符串声明：
<input type="number" min="0.00" max="999.99" step="0.01" value="199.99">
这样无论批量渲染多少个，每个的合法值序列都是 0.00, 0.01, 0.02, ..., 999.99，不会因隐式类型转换或浏览器差异而漂移。金额类尤其要这么做——浮点误差不是 bug，是必然发生的事，靠对齐位数比靠 JS 修复更可靠。
