纯HTML无法实现真正可用的数量增减按钮，因缺乏交互能力；input[type="number"]的原生箭头不可控、兼容性差且无法自定义逻辑。
怎么用纯HTML实现数量增减按钮（无JS）
不能。纯HTML没有交互能力，<input type="number"> 的上下箭头是浏览器内置控件，但点击后触发的是浏览器原生行为，无法自定义逻辑、无法监听变化、也不能禁用或隐藏箭头（尤其在Safari里几乎不可控）。所谓“静态结构”，其实只是视觉占位，真要增减必须靠JS。
input[type="number"] 的坑比你想象的多
它看起来最省事，但实际项目中常踩这些坑：
-
step默认是1，但如果设成0.1，在某些安卓WebView里会直接失效，输入小数后点加减按钮变成NaN -
min/max在iOS Safari中不阻止手动输入超限值，只影响箭头点击行为 - 用户手动输入非数字（比如“abc”），
valueAsNumber返回NaN，但value还是字符串，容易引发隐式类型错误 - 没有防抖机制，快速连点可能触发多次事件，后端收到重复请求
最简可用的HTML+JS增减结构长什么样
别套UI框架，先保证功能正确。核心是三个元素绑定同一份状态，且所有修改入口都走统一函数：
<div class="quantity"> <button type="button" onclick="changeQty(-1)">−</button> <input type="number" id="qty" value="1" min="1" max="999" step="1" readonly> <button type="button" onclick="changeQty(1)">+</button> </div>
配套JS只需几行：
立即学习“前端免费学习笔记（深入）”；
function changeQty(delta) {
const input = document.getElementById('qty');
let val = parseInt(input.value) || 0;
val = Math.max(parseInt(input.min) || 1, Math.min(parseInt(input.max) || 999, val + delta));
input.value = val;
}
- 不用
onchange或input事件监听——用户根本不会去点输入框，所有变更必须收口到按钮 -
readonly比disabled更合适：保持样式可读，又防止手输乱码 - 服务端永远以提交时的
input.value为准，前端校验只是体验优化，不能替代后端验证
为什么别急着加“禁用按钮”逻辑
看到 min="1" 就立刻给减号加 disabled，这是典型过早优化。问题在于：
- 按钮状态和输入框值不同步：用户手输“0”再点减号，按钮还是可点，但逻辑已失效
- 屏幕阅读器对动态
disabled支持不一，可能跳过被禁用按钮，造成操作盲区 - 移动端触摸热区小，禁用后用户不知道“为什么点不了”，不如让点击有反馈（比如震动或toast提示）
真正该做的是：点击减到最小值时，保持输入框显示 1，不报错也不闪动，就像它本来就应该这样。
