number输入框未设value时，如何控制箭头点击的初始值？

问题核心：未设置value的number输入框，浏览器会将空值默认视为0处理增减操作，导致点击增量箭头时从0开始，而非你期望的placeholder值18。

方案1：直接设置初始value（最简方案） #

给输入框添加value="18"属性，让初始值与placeholder一致。这样点击减量箭头直接得到17，增量箭头因max限制不会改变值：

<input type="number" min="0" max="18" value="18" placeholder="18">

方案2：JavaScript处理空值场景（保留初始空状态） #

如果需要输入框初始显示为空（仅展示placeholder），但点击箭头/使用键盘/滚轮时自动以placeholder为初始值计算，可以通过监听操作事件实现：

<input type="number" min="0" max="18" placeholder="18" id="ageInput">

<script>
const ageInput = document.getElementById('ageInput');

function initValueIfEmpty() {
  if (!ageInput.value && ageInput.placeholder) {
    ageInput.value = ageInput.placeholder;
  }
}

// 监听箭头点击
ageInput.addEventListener('mousedown', initValueIfEmpty);
// 监听滚轮增减
ageInput.addEventListener('wheel', initValueIfEmpty);
// 监听键盘上下箭头
ageInput.addEventListener('keydown', (e) => {
  if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !ageInput.value) {
    initValueIfEmpty();
  }
});
</script>

第一次触发增减操作时，输入框会自动将placeholder的18设为当前值，再执行对应操作：点击减量得到17，点击增量因max限制无变化，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Arek TG