如何用JavaScript限制HTML输入框小数点前后仅允许两位数字？

要实现一个仅允许小数点前最多2位、小数点后最多2位数字的输入框，可以通过HTML输入框结合JavaScript监听输入事件完成，以下是具体方案：

需求规则 #

• 允许的输入格式：
  • 0-2位整数（如1、12）
  • 0-2位整数 + 小数点 + 0-2位小数（如1.05、12.78）
• 禁止的输入格式：
  • 整数部分超过2位（如122.45）
  • 存在多个小数点（如122..45）
  • 小数部分超过2位（如122.789）

代码实现 #

HTML部分 #

创建文本输入框用于接收用户输入：

<input type="text" id="limitedNumberInput" placeholder="请输入数字（整数≤2位，小数≤2位）">

JavaScript部分 #

通过监听input事件实时校验并修正输入内容：

const inputElement = document.getElementById('limitedNumberInput');

inputElement.addEventListener('input', function(e) {
  // 记录光标位置，避免输入时光标跳至末尾
  const cursorPosition = this.selectionStart;
  
  // 过滤非数字和小数点的字符
  let inputValue = this.value.replace(/[^\d.]/g, '');
  
  // 处理多个小数点，仅保留第一个
  const firstDotIndex = inputValue.indexOf('.');
  if (firstDotIndex !== -1) {
    inputValue = inputValue.slice(0, firstDotIndex + 1) + inputValue.slice(firstDotIndex + 1).replace(/\./g, '');
    
    // 拆分整数和小数部分，分别限制长度
    const [integerPart, decimalPart] = inputValue.split('.');
    let processedValue = integerPart;
    
    // 限制整数部分最多2位
    if (processedValue.length > 2) {
      processedValue = processedValue.slice(0, 2);
    }
    
    // 限制小数部分最多2位
    if (decimalPart) {
      processedValue += '.' + decimalPart.slice(0, 2);
    }
    
    inputValue = processedValue;
  } else {
    // 无小数点时限制整数最多2位
    if (inputValue.length > 2) {
      inputValue = inputValue.slice(0, 2);
    }
  }
  
  // 更新输入框值并恢复光标位置
  this.value = inputValue;
  this.setSelectionRange(cursorPosition, cursorPosition);
});

效果验证 #

输入示例内容会自动修正为符合规则的格式：

• 1.05 → 保留原内容（符合规则）
• 12.05 → 保留原内容（符合规则）
• 12.78 → 保留原内容（符合规则）
• 122.45 → 自动修正为12.45
• 122..45 → 自动修正为12.45
• 122.789 → 自动修正为12.78

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