加减按钮必须用语义化button元素并设type="button"，配合aria-label、min/max属性及input/change双事件校验；步进计算需整数运算防浮点误差；移动端需处理双击缩放与触摸反馈。
加减按钮的HTML结构必须用button而非div
用div模拟按钮会导致无障碍访问失败、键盘无法聚焦、空格/回车不触发，且移动端点击反馈缺失。必须用语义化button，并设置type="button"防止表单意外提交。
基础结构示例：
<div class="stepper"> <button type="button" class="stepper__decrease" aria-label="减少数值">−</button> <input type="number" class="stepper__input" value="5" min="0" max="100" step="1"><button type="button" class="stepper__increase" aria-label="增加数值">+</button> </div>
-
input[type="number"]自带原生边界控制（min/max），但仅限表单提交或调用checkValidity()时生效，JS实时操作仍需手动校验 -
aria-label对屏幕阅读器必需，不可省略 - 避免给
button设disabled后再用CSS隐藏——应保留可聚焦状态，仅视觉灰显
JavaScript边界控制必须在change和input两个事件里分别处理
只监听change会导致用户拖动输入框滑块或粘贴非法值时不响应；只监听input又会在快速连点时因异步更新产生竞态，导致越界。
- 在
input事件中做「即时裁剪」：解析值，强制限制在[min, max]范围内，再写回input.value - 在
change事件中做「终局校验」：再次检查值是否合法，修复粘贴、拖拽等绕过input事件的操作 - 加减按钮点击逻辑必须调用同一套校验函数，避免重复实现
关键校验函数示例：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
function clampValue(value, min, max) {
const num = Number(value);
if (isNaN(num)) return min;
return Math.min(Math.max(num, min), max);
}
step属性和JS中的步长计算必须严格一致
HTML input[type="number"] 的 step 默认是1，但若设为0.1，直接用valueAsNumber + 0.1会因浮点误差变成0.30000000000000004，后续比较或显示异常。
- 所有步进计算统一用整数运算：例如
step="0.1"时，内部按value * 10存整数，增减后除以10显示 - 读取时优先用
input.valueAsNumber而非input.value，它自动处理字符串转数字和step对齐 - 设置
step="any"可绕过浏览器对step的硬性约束，但意味着全部校验移交JS，需自行保证步长精度
移动端双击放大问题与触摸反馈容易被忽略
iOS Safari默认对button元素启用双击缩放，连续点击加减按钮可能意外触发页面缩放；安卓部分浏览器点击无视觉反馈，用户不确定是否点中。
- 在
button上加style="-webkit-tap-highlight-color: transparent;"消除iOS点击高亮色，同时禁用双击缩放 - 加
touch-action: manipulation提升触摸响应速度，并抑制双击缩放 - 不要依赖
:active伪类做点击反馈——移动端:active持续时间极短，应结合JS添加临时class并用CSS过渡
边界控制不是一次校验就完事的事，它得贯穿输入、粘贴、拖拽、按钮点击、甚至程序式赋值所有入口。最容易漏的是粘贴和step="any"场景下的浮点处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
