如何限制输入框整数位与小数位长度并仅允许数字及Backspace/Del键

刚好做过类似的需求，给你一个完整的实现方案，完美匹配你要的输入限制效果——既能限制整数和小数部分的长度，又只允许合法的按键输入。

核心实现思路 #

• 拦截输入事件，只放行数字键、Backspace和Delete键（额外加了方向键，方便用户移动光标，不需要可以去掉）
• 实时拆分输入内容的整数和小数部分，分别做长度校验，避免超出限制
• 处理粘贴场景，防止用户粘贴不符合规则的内容

完整代码示例 #

HTML部分 #

<input type="text" id="limitedNumberInput" placeholder="示例：整数最多3位，小数最多2位">

JavaScript部分 #

const input = document.getElementById('limitedNumberInput');
// 可配置的长度参数，按需修改
const maxIntegerDigits = 3;
const maxDecimalDigits = 2;

// 监听键盘输入事件
input.addEventListener('keydown', function(e) {
  // 允许的按键：数字键（主键盘+小键盘）、Backspace、Delete、方向键
  const allowedControlKeys = [8, 46, 37, 38, 39, 40];
  const isMainKeyboardNumber = e.keyCode >= 48 && e.keyCode <= 57;
  const isNumpadNumber = e.keyCode >= 96 && e.keyCode <= 105;
  
  // 非法按键直接阻止
  if (!isMainKeyboardNumber && !isNumpadNumber && !allowedControlKeys.includes(e.keyCode)) {
    e.preventDefault();
    return;
  }

  const currentValue = this.value;
  const [integerPart, decimalPart] = currentValue.split('.');

  // 未输入小数点时，检查整数部分长度
  if (!currentValue.includes('.')) {
    if (integerPart && integerPart.length >= maxIntegerDigits) {
      // 不是删除/退格键的话，阻止输入
      if (![8,46].includes(e.keyCode)) {
        e.preventDefault();
      }
    }
  } else {
    // 已输入小数点时，检查小数部分长度
    if (decimalPart && decimalPart.length >= maxDecimalDigits) {
      if (![8,46].includes(e.keyCode)) {
        e.preventDefault();
      }
    }
  }
});

// 处理粘贴事件，防止非法内容粘贴
input.addEventListener('paste', function(e) {
  e.preventDefault();
  const pastedContent = e.clipboardData.getData('text');
  // 用正则验证粘贴内容是否符合规则
  const validPattern = new RegExp(`^\\d{0,${maxIntegerDigits}}(\\.\\d{0,${maxDecimalDigits}})?$`);
  if (validPattern.test(pastedContent)) {
    this.value = pastedContent;
  }
});

效果说明 #

按照示例配置（整数3位、小数2位）：

• 允许输入：333、221.22、1、12、0.5
• 禁止输入：9999（整数超3位）、999.999（小数超2位）、abc（非数字）、12.34.5（多个小数点）

你只需要修改maxIntegerDigits和maxDecimalDigits这两个变量，就能适配不同的长度需求啦。

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