number输入框的step属性必须显式设置（如step="1"或step="0.1"）才能触发浏览器显示上下微调箭头，否则在Chrome/Edge中箭头将消失；step="any"或省略该属性均会导致微调功能不可用。
number 输入框的 step 属性必须显式设置才能触发微调按钮
浏览器默认不会给 <input type="number"> 显示上下微调箭头，除非你设置了 step。哪怕设成 step="1" 或 step="0.1" 都行，但留空或设为 step="any" 会导致箭头消失（尤其在 Chrome 和 Edge 中）。
常见错误是只写 <input type="number" value="5">，结果用户只能手动输，没法点箭头增减。
-
step值必须是数字（如1、0.01），不能是字符串"1"（虽然部分浏览器会自动转，但不可靠） - 若需支持小数但又怕精度问题，建议用
step="0.01"+min/max限定范围，避免用户输入0.30000000000000004 - 移动端 Safari 对
step支持较弱，微调按钮可能不显示，得靠 JS 补充手势或按钮
用 JavaScript 控制微调逻辑时别直接改 value，要用 setRangeText
想实现按住上/下键连续增减，或点击按钮一次增减多档，直接赋值 input.value = Number(input.value) + 1 容易出错：它绕过了表单的原生校验（比如 min/max）、不触发 input 事件、还可能把字符串 "5.00" 变成 "6" 导致格式丢失。
更稳妥的方式是调用 setRangeText() 或利用 stepUp()/stepDown()：
-
input.stepUp(1)和input.stepDown(1)会尊重step、min、max，且触发input和change事件 - 若要自定义步长（比如每次 ±0.5），先临时改
input.step = "0.5"，再调stepUp()，完事再恢复原step - 注意：如果
value是空字符串或非法值（如"abc"），stepUp()会静默失败，建议提前if (input.checkValidity()) { ... }
微调后数值精度丢失？检查 valueAsNumber 和 toFixed 的配合方式
用户输入 3.2，点一次 stepUp() 后变成 4.200000000000001 —— 这不是 bug，而是浮点数计算的必然结果。浏览器内部用 valueAsNumber 读值时返回的是 IEEE 754 数字，直接转字符串就暴露了精度误差。
修复的关键不是“四舍五入”，而是控制显示和提交分离：
- 显示层：监听
input事件，用input.value = parseFloat(input.value).toFixed(2)强制两位小数（仅影响 UI，不改实际数值） - 提交层：用
input.valueAsNumber获取原始数字，它比parseFloat(input.value)更可靠（能处理空值、非法值返回NaN） - 别用
valueAsNumber.toFixed(2)赋回value，这会把数字转字符串再塞进 input，下次valueAsNumber可能解析失败
禁用原生微调按钮但保留键盘操作？用 appearance + pointer-events 组合
有些设计要求隐藏上下箭头（比如为了统一 UI），但又希望用户仍能用键盘 ↑↓ 键增减。直接 appearance: none 在 Chrome 里会连键盘支持也干掉。
真正可行的隐藏方案是：
- CSS 中用
::-webkit-inner-spin-button { -webkit-appearance: none; }隐藏箭头，不影响键盘行为 - 同时加
::-webkit-inner-spin-button { display: none; }兼容旧版 Chrome - Firefox 需单独处理：
input[type="number"] {-moz-appearance: textfield;}，否则箭头无法隐藏 - 千万别用
pointer-events: none在整个 input 上，它会让所有交互（包括聚焦、打字）失效
微调功能看着简单，但跨浏览器行为差异、浮点精度、事件时机、样式穿透这几个点，漏掉一个就容易在线上被用户截图吐槽。
