如何用JavaScript限制表单输入框仅允许输入数字？

下面是几种实用的实现方式，覆盖不同场景的需求：

方法1：实时阻止非数字按键输入 #

通过监听keydown事件，直接阻止非数字且非功能键的输入，适合需要严格实时限制的场景：

const numberInput = document.getElementById('number-input');

numberInput.addEventListener('keydown', function(e) {
  // 允许必要的功能键：退格、删除、方向键、Tab、复制粘贴快捷键
  const allowedKeys = [8, 9, 46, 37, 38, 39, 40, 65, 67, 86];
  const isModifier = e.ctrlKey || e.metaKey;

  // 功能键或组合键直接放行
  if (allowedKeys.includes(e.keyCode) || (isModifier && allowedKeys.includes(e.keyCode))) {
    return;
  }

  // 非数字按键直接阻止
  if (e.key < '0' || e.key > '9') {
    e.preventDefault();
  }
});

注意：这个方法无法处理粘贴、拖拽等非键盘输入的情况，建议配合其他方法使用。

方法2：过滤输入值（兼容所有输入方式） #

监听input事件，直接将输入框内容中的非数字字符过滤掉，能覆盖手动输入、粘贴、拖拽等所有输入场景：

const numberInput = document.getElementById('number-input');

numberInput.addEventListener('input', function() {
  // 移除所有非数字字符
  this.value = this.value.replace(/\D/g, '');
});

特点：兼容性强，处理所有输入方式，但用户输入非数字时会看到字符短暂出现后消失，体验略有瑕疵。

方法3：HTML5数字输入框+JS增强 #

结合HTML5的type="number"（移动端自动弹出数字键盘），再用JS过滤掉允许输入的特殊字符（如e、+、-）：

<input type="number" id="number-input">

const numberInput = document.getElementById('number-input');

// 过滤输入值中的非数字字符
numberInput.addEventListener('input', function() {
  this.value = this.value.replace(/[^0-9]/g, '');
});

// 阻止键盘输入e、+、-等特殊字符
numberInput.addEventListener('keydown', function(e) {
  const forbiddenChars = ['e', 'E', '+', '-'];
  if (forbiddenChars.includes(e.key)) {
    e.preventDefault();
  }
});

优势：兼顾移动端输入体验和输入限制，是目前较常用的方案。

扩展：支持小数点输入 #

如果需要允许输入小数点，可以修改正则表达式，同时限制仅能输入一个小数点：

const numberInput = document.getElementById('number-input');

numberInput.addEventListener('input', function() {
  // 保留数字和一个小数点
  this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
});

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