如何为HTML的number类型输入框添加区分上下箭头的事件监听器？

方案1：监听键盘按键（针对键盘操作） #

直接用keydown事件捕捉上下箭头，判断按键类型后修改变量。如果不需要输入框本身的数值变化，可以阻止默认行为；如果需要同步数值，也可以额外处理输入框的值。

const strength = document.querySelector('#Strength');
let ability_points = 0;

strength.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowUp') {
    ability_points += 1;
    console.log('当前能力点数:', ability_points);
    // 可选：同步输入框数值
    // strength.value = (parseInt(strength.value) || 0) + 1;
  } else if (e.key === 'ArrowDown') {
    ability_points -= 1;
    console.log('当前能力点数:', ability_points);
    // 可选：同步输入框数值
    // strength.value = (parseInt(strength.value) || 0) - 1;
  }
  // 可选：阻止输入框默认数值变化（如果不需要的话）
  // e.preventDefault();
});

方案2：监听数值变化（兼容键盘+鼠标点击箭头） #

如果要覆盖鼠标点击输入框上下按钮的场景，可以用input事件，通过对比输入框的前后值判断是增还是减，再修改变量。

const strength = document.querySelector('#Strength');
let ability_points = 0;
let prevValue = parseInt(strength.value) || 0; // 初始化记录输入框当前值

strength.addEventListener('input', (e) => {
  const currentValue = parseInt(e.target.value) || 0;
  
  if (currentValue > prevValue) {
    ability_points += 1;
  } else if (currentValue < prevValue) {
    ability_points -= 1;
  }
  
  prevValue = currentValue; // 更新记录的旧值
  console.log('当前能力点数:', ability_points);
});

注意点 #

• 处理输入框为空的情况，用parseInt(xxx) || 0避免出现NaN导致逻辑出错。
• 如果用方案1，用户直接输入数字时不会触发箭头键逻辑，这种场景如果需要处理，就得结合方案2的思路。

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