原生 <input type="number"> 不能直接用作可靠加减输入框，因 Safari 无法隐藏箭头、iOS 存在浮点误差、移动端键盘错乱、不响应 click 事件且无点击反馈，必须手动封装 button + input[type="text"] 结构并统一校验逻辑。
原生 <input type="number"> 不能直接当作可靠加减输入框用——它在 Safari 里箭头无法隐藏、iOS 上 step="0.1" 会算出 0.10000000000000001、移动端常弹错键盘、不响应 click 事件，更没法做点击反馈。真要上线，必须手动封装。
为什么不能只靠 type="number" 的原生控件
常见错误现象：用户点加减箭头没反应；输入 0.1 后值变成 0.10000000000000001；Safari 页面上始终显示上下小箭头且 appearance: none 失效；安卓微信里点输入框弹出全键盘而非数字键盘。
根本原因在于：type="number" 的原生行为由浏览器控制，不是标准 DOM 事件驱动，click 不触发、input 事件延迟、change 只在失焦时才校验，边界（min/max）也只在表单提交或调用 checkValidity() 时生效。
- 移动端适配差：iOS 强制数字键盘但无加减按钮；Android 各厂商软键盘策略不一
- 浮点误差未处理：
parseFloat('0.1') + parseFloat('0.2')≠0.3，需统一用整数运算或Number(val.toFixed(precision)) - 无障碍缺失：没
aria-label、没button[type="button"]语义，屏幕阅读器读不出“减少数值”
button + input[type="text"] 手动封装的最小可行结构
核心是绕过原生控件，用两个 button 控制一个 input[type="text"] 的值，并全程接管校验逻辑。
立即学习“前端免费学习笔记（深入）”；
基础 HTML 结构必须满足：
-
input设为type="text"（避免原生箭头干扰），再用inputmode="decimal"和pattern="[0-9]*"引导键盘类型 - 加减按钮必须是
<button type="button">，不可用div；必须带aria-label，如aria-label="增加数值" - 不要给按钮设
disabled后用 CSS 隐藏——保留可聚焦状态，仅视觉灰显（否则键盘用户无法操作）
示例片段：
<div class="stepper"> <button type="button" class="stepper__decrease" aria-label="减少数值">−</button> <input type="text" class="stepper__input" value="5" inputmode="decimal" pattern="[0-9]*"> <button type="button" class="stepper__increase" aria-label="增加数值">+</button> </div>
JavaScript 边界与精度控制的关键写法
加减按钮点击、用户手动输入、粘贴、拖拽滑块等所有路径都必须被同一套校验逻辑覆盖，否则 UI 和数据立刻脱节。
关键点：
- 加减操作必须用整数运算防浮点误差：比如步长
0.1，就先Math.round(val * 10)→ ±1 →/ 10，而不是直接val + 0.1 - 必须监听
input和change两个事件：input做即时裁剪（用户输错立刻重置），change做终局兜底（修复粘贴、拖拽等绕过input的操作） - 按钮点击逻辑必须调用和输入事件相同的校验函数，避免重复实现或逻辑不一致
- 写回
input.value后，手动触发input.dispatchEvent(new Event('input'))，确保其他监听者（如总价计算）能响应
简单校验函数示意：
function clampValue(val, min, max, step = 1) {
const num = Number(val);
if (isNaN(num)) return min;
const scaled = Math.round(num / step);
const clamped = Math.max(Math.round(min / step), Math.min(Math.round(max / step), scaled));
return Number((clamped * step).toFixed(10));
}移动端双击缩放与触摸反馈容易被忽略
很多实现上线后在 iOS 上点一次按钮没反应、点两次才触发，其实是双击缩放被误触发；还有按钮点击无视觉反馈，用户不确定是否点中。
必须加的防护：
- 在
<head>中确保有<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">，禁用双击缩放 - 给按钮加
touch-action: manipulation，提升点击响应速度 - 用
:active或 JS 添加临时 class 实现按下态（哪怕只是背景色微变），否则用户会反复点击 - 避免在按钮上绑定
click和touchstart两套事件——用click即可，现代移动端已兼容
最麻烦的不是怎么加减，而是所有入口（按钮、键盘输入、粘贴、拖拽）都走同一套解析→校验→写入→通知流程。漏掉任意一环，就会出现“界面上是 5，但脚本读到的是空或 NaN”。
