FORM & INPUT
数字步进器Number Stepper
横向三段式数字输入：减号按钮 + 数字 + 加号按钮，适合数量、参数等离散数值。
效果预览
适合用在哪
购物车数量、库存调整、参数配置、表单数值输入。
不适合：数值需要快速键入精确大数时，步进器效率低于普通 input；纯展示不需要编辑的数值不要做成 stepper。
和相近模式的区别
区间滑块Range Slider
Range Slider 适合在连续区间内选值；Number Stepper 适合离散、精确的整数/小数，且占用空间更小。
容易踩的坑
- 中间是 input 但只读，长按按钮时无法直接键入精确值，鱼和熊掌不可兼得。
- min/max 没处理好时两个按钮同时 disabled，用户无法修改。
- 步长 step 和精度 decimal 不匹配，输入 1.5 时显示 1 或 2。
设计提示词 · Prompt
数字步进器（Number Stepper）：三段共享一个圆角容器（圆角 10-12px、1px 描边、overflow:hidden、height 40-44px）。左右各是一个 40-44px 正方形按钮：左侧「−」、右侧「+」，中间用 1px 描边分隔。中间是等宽数字输入框（text-align:center、border:0、font-variant-numeric:tabular-nums）。达到 min 时左侧按钮 disabled；达到 max 时右侧按钮 disabled。支持长按连续增减；键盘上下方向键。
Number Stepper: a three-part horizontal control sharing one rounded container (10-12px radius, 1px stroke, overflow hidden, height 40-44px). Left is a square "−" button, right is a square "+" button, each 40-44px, separated by 1px strokes. Center is a centered numeric input with tabular-nums. Left button disabled at min; right button disabled at max. Support long-press for continuous increment/decrement. Keyboard: Up/Down changes value, Shift+Up/Down changes by larger step.
可复制 CSS
自包含的最小实现，粘贴到空白页面即可生效；类名可以按项目规范改名。
/* <div class="num-stepper"><button aria-label="减">−</button><input value="3" inputmode="numeric"><button aria-label="加">+</button></div> */
.num-stepper { display: inline-flex; align-items: center; border: 1px solid #d1d5db; border-radius: 10px; overflow: hidden; height: 44px; }
.num-stepper button { width: 44px; border: 0; border-right: 1px solid #e5e7eb; background: #fff; font: 18px/1 system-ui, sans-serif; cursor: pointer; }
.num-stepper button:last-child { border-right: 0; border-left: 1px solid #e5e7eb; }
.num-stepper button:disabled { color: #d1d5db; cursor: not-allowed; }
.num-stepper input { width: 60px; border: 0; text-align: center; font: 15px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
演示 HTML 结构
<div class="s d-center">
<div class="form-stepper">
<button class="form-stepper__btn" type="button" aria-label="减少">−</button>
<input class="form-stepper__num" value="3" readonly>
<button class="form-stepper__btn" type="button" aria-label="增加">+</button>
</div>
</div>
常见问题
中间是 input 还是 span？
用 input 更灵活，用户可以直接键入精确值；只读 span 适合不允许手动输入、必须靠按钮调整的场景。
长按连续增减怎么做不卡顿？
pointerdown 时启动 setInterval（间隔 120ms），pointerup/pointerleave/pointercancel 时 clearInterval；首次按下一次，之后每 120ms 触发一次。
常见搭配
同一页面里经常和「数字步进器」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。