step设了没反应是因为仅对type="number"生效，且必须配合min和合法value（如value="0.0"）才能锚定起始点；type="text"加step无效，未设min时浏览器可能将空值视为0导致跳变。
为什么 step 设了却没反应
常见现象是给 <input type="number"> 加了 step="0.1"，但点击上下箭头还是按 1 增减，或者手动输入 0.15 后失焦变成 0.2——这不是 bug，而是浏览器严格遵循规范的行为。
根本原因是：step 只对 type="number" 生效，且必须配合有效的 min 和 value（或初始空值被解析为 0）才能正确锚定起始点。如果没设 min，部分浏览器会把“空值”当作 0，导致首次点击↑直接跳到 0+step；如果 value 是非法字符串（如空格、"—"），也会回退到 min 或 0。
-
type必须是"number"，type="text"+step完全无效 -
min和max建议显式声明，否则边界行为在 Safari/Chrome 中不一致 - 想让小数步进可靠工作，
value初始值最好设为合法数字（如value="0.0"），别留空 - 移动端键盘是否显示小数点，取决于
step是否含小数位 +inputmode="decimal"是否存在（iOS Safari 16.4+ 才支持）
如何禁用原生上下箭头并保留可访问性
原生箭头在视觉设计中常需隐藏，但不能简单用 display: none —— 这会让屏幕阅读器丢失控件语义，也破坏键盘 Tab 流。正确做法是用 appearance 重置 + 透明遮罩。
以下 CSS 能在 Chrome/Safari/Firefox 中统一移除箭头视觉，同时保持输入框可聚焦、可复制、可读取：
立即学习“前端免费学习笔记（深入）”；
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
注意：-moz-appearance: textfield 是 Firefox 必选项，缺了它仍会显示残余按钮；-webkit-appearance: none 单独写不生效，必须配 margin: 0 清除默认边距。
自定义增减按钮时如何避免 value 初始化陷阱
用户看到 placeholder="18" 就以为初始值是 18，但浏览器根本不认 placeholder —— 它只是提示文字。真正决定首次点击↓从哪开始的，是 value 属性值。
如果你希望“第一次点减号得到 17”，就必须写 value="18"，而不是靠 JS 在 DOMContentLoaded 里赋值。后者会导致 DOM 渲染完成前出现闪动，且可能被表单自动填充覆盖。
- 用
readonly代替disabled：前者允许聚焦和复制，后者会阻止所有交互且不提交 value - 不要用
placeholder模拟初始值，它对逻辑无影响 - JS 增减逻辑里直接用
++/--，浏览器会自动转成数字，比parseInt()更安全（空字符串变 NaN，--后是 -1，而parseInt("")是 NaN） - 边界检查必须在每次操作前做：
if (num > min) num--，不能只依赖max/min属性——它们只约束输入，不限制 JS 修改
监听箭头操作只能靠 change 事件
没有 spinup 或 arrowclick 这类原生事件。浏览器不暴露箭头点击的底层信号，所有“监听箭头”方案本质都是监听值变化的提交时机。
change 是唯一可靠选择：它在用户点击箭头、手动输入后失焦、或按 Enter 提交时都触发。而 input 事件太频繁（每敲一个键就触发），blur 又太晚（可能已离开上下文）。
注意两个细节：
-
change不会在用户点击箭头但值未变时触发（比如当前是 0，min="0"，再点 ↓ 不触发） - 若需区分“是箭头改的还是手输的”，得自己记
lastValue并比对，无法靠事件类型判断 - 服务端校验不能省——前端
min/max/step全可绕过，仅作体验层辅助
最易被忽略的一点：当 value 初始为空字符串或非法值（如 "abc"）时，不同浏览器会按不同规则 fallback 到 min、0 或 NaN，这个过程不可控。所以只要业务逻辑依赖初始值，value 就必须显式写出合法数字。
