当使用 且设置了 min="0" max="18" 但未设初始值时，原生向上箭头会默认将空值设为 min（即 0），而非期望的 max 或占位逻辑。本文提供完全可控的自定义增减方案，禁用原生控件并用 JavaScript 实现符合业务预期的数值变更逻辑。
当使用 `` 且设置了 `min="0" max="18"` 但未设初始值时，原生向上箭头会默认将空值设为 `min`（即 0），而非期望的 `max` 或占位逻辑。本文提供完全可控的自定义增减方案，禁用原生控件并用 javascript 实现符合业务预期的数值变更逻辑。
浏览器对 的原生上下箭头（spin buttons）有固定行为：当输入框为空或非法值时，点击向上箭头会自动填充 min 值（本例中为 0），这与许多业务场景相悖——例如希望首次点击“减”时得到 17（即 max - 1），或保持初始视觉提示为 18（如 placeholder 所示），但又不预先提交该值。
根本解决思路是：放弃原生箭头，接管全部交互逻辑。
通过 CSS 彻底隐藏原生 spin buttons，并用自定义按钮 + JavaScript 控制数值变更，从而实现完全可预测的行为。
✅ 步骤一：禁用原生箭头样式
/* 移除 Chrome/Safari 的上下箭头 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* 移除 Firefox 的 spinner 样式（还原为普通文本框） */
input[type="number"] {
-moz-appearance: textfield;
font-size: 2rem;
font-weight: bold;
width: 4rem;
text-align: center;
}
✅ 步骤二：构建结构化 UI
<div class="numbering">
<input id="numBox" type="number" min="0" max="18" value="18" disabled><div class="arrows">
<button class="btn arrowUp">↑</button>
<button class="btn arrowDown">↓</button>
</div>
</div>
⚠️ 注意：value="18" 确保初始显示为 18；disabled 属性防止用户直接键盘输入（若需允许输入，请移除 disabled 并补充输入校验逻辑）。
✅ 步骤三：实现安全的增减逻辑（含边界防护）
const numBox = document.getElementById('numBox');
const buttons = document.querySelectorAll('.btn');
buttons.forEach(btn => {
btn.addEventListener('click', () => {
const currentValue = parseInt(numBox.value) || 18; // 空值时默认视为 18（符合 placeholder 意图）
if (btn.classList.contains('arrowUp') && currentValue 0) {
numBox.value = currentValue - 1;
}
});
});
该逻辑确保：
- 初始空值/非法值按 18 处理（而非 0）；
- 严格遵守 min=0 / max=18 边界，不会越界；
- 点击“减”时从 18 → 17，符合预期。
? 补充说明与最佳实践
- 若需支持键盘输入，请移除 disabled，并在 input 事件中添加 checkValidity() 和 setCustomValidity() 校验；
- 可扩展为支持 step 属性（如 step="0.5"），只需将 +1/-1 替换为 +stepValue；
- 无障碍（a11y）建议：为按钮添加 aria-label="Increase value" / "Decrease value"，并确保 input 有 aria-live="polite" 以通知屏幕阅读器变化；
- 移动端兼容性良好，所有现代浏览器均支持上述 CSS 和事件模型。
通过此方案，你不再受制于浏览器对空值的默认解释，而是完全掌控数值初始化、变更和边界行为——这才是专业表单交互应有的确定性与一致性。
