如何移除<input type="number">的键盘上下箭头增减数字功能？

当然有办法搞定这个问题！我给你整理了几种实用的方案，按需选择就行：

• 单个输入框禁用：通过JavaScript监听键盘按下事件，拦截上下箭头的默认行为
  直接给目标输入框绑定keydown事件，当检测到按下的是ArrowUp或ArrowDown时，阻止浏览器的默认操作：

  const numInput = document.querySelector('input[type="number"]');
  numInput.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
      e.preventDefault();
    }
  });
  

• 全局所有number输入框禁用：用事件委托的方式，一次性处理页面上所有的数字输入框
  这种方式不用逐个绑定事件，适合页面上有多个number输入框的场景：

  document.addEventListener('keydown', (e) => {
    if (e.target.type === 'number' && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
      e.preventDefault();
    }
  });
  

• 框架环境下的处理（以React为例）：
  在React组件里直接给输入框添加onKeyDown回调即可：

  <input
    type="number"
    onKeyDown={(e) => {
      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
        e.preventDefault();
      }
    }}
  />
  

需要注意的是，如果你的输入框有其他需要用到上下箭头的自定义逻辑，记得调整判断条件，别把有用的操作也一起拦截了哦～

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