只读number类型输入框的增减按钮点击事件是否可以被监听？

可行实现方案 #

原生没有专门监听number输入框步进按钮点击的专属事件，但可以通过以下两种常用技巧实现监听，完全保留原生number输入框的特性，无需自定义按钮：

• 方案1：鼠标点击坐标判定（适配桌面端点击场景）
  原生输入框的步进按钮固定在控件右侧区域，可通过点击事件的坐标偏移量判断是否点击了步进按钮，同时通过y轴坐标区分点击的是增加还是减少按钮。
  代码示例：

  const numberInput = document.querySelector('input[type="number"][readonly]');
  
  numberInput.addEventListener('mousedown', (e) => {
    // 步进按钮宽度通常为18-22px，可根据实际浏览器适配调整阈值
    const isHitSpinner = e.offsetX > e.target.clientWidth - 20;
    if (!isHitSpinner) return;
  
    // 上半区域为增加按钮，下半区域为减少按钮
    const isIncrement = e.offsetY < e.target.clientHeight / 2;
    // 此处写对应业务逻辑
    console.log(isIncrement ? '点击增加' : '点击减少');
  });
  

  该方案优势是无需修改原有的readonly属性，逻辑轻量；缺点是阈值需要根据浏览器样式微调，不支持键盘上下键、滚轮调整等其他原生操作。

• 方案2：值变更拦截（全操作场景兼容）
  去掉readonly属性，通过事件拦截模拟只读效果，同时可以监听到所有原生操作触发的值变更意图，覆盖点击步进按钮、键盘上下键、滚轮调整等所有原生number输入框的操作场景。
  首先给输入框添加CSS模拟只读视觉效果：

  input[type="number"].simulate-readonly {
    user-select: none;
    cursor: default;
    /* 可补充其他和readonly一致的样式，比如边框、背景色 */
  }
  

  对应JS逻辑：

  const numberInput = document.querySelector('input[type="number"].simulate-readonly');
  // 存储原始值，模拟只读效果
  let fixedValue = numberInput.value || 0;
  
  numberInput.addEventListener('input', (e) => {
    const currentValue = Number(e.target.value);
    if (currentValue > fixedValue) {
      console.log('触发增加操作');
    } else if (currentValue < fixedValue) {
      console.log('触发减少操作');
    }
    // 重置回固定值，实现只读效果
    e.target.value = fixedValue;
  });
  
  // 可选：阻止手动输入字符，仅保留步进、上下键、滚轮操作
  numberInput.addEventListener('keydown', (e) => {
    const allowedKeys = ['ArrowUp', 'ArrowDown', 'Tab'];
    if (!allowedKeys.includes(e.key)) {
      e.preventDefault();
    }
  });
  

  该方案优势是完美兼容所有原生number输入框的操作特性，无需适配不同浏览器的步进按钮样式；缺点是需要额外添加CSS模拟只读视觉效果。

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