如何用JavaScript实现输入框实时保留两位小数的动态更新？

当然可以用HTML和纯JavaScript实现这种ATM式的实时格式化输入效果，不用依赖其他语言，也完全能避开你提到的Number.prototype.toFixed()和Number.prototype.toLocaleString()方法。

核心实现思路 #

我们通过直接操作输入的字符序列来实现，避免将输入值转为数字后再格式化：

• 维护两个字符串变量分别存储整数部分和小数部分，同时记录是否已输入小数点
• 每次输入时过滤非法字符，更新整数/小数部分的内容
• 最后通过字符串拼接补全两位小数，实时更新输入框显示

完整代码实现 #

<input type="text" id="atmInput" placeholder="输入金额" />

<script>
const input = document.getElementById('atmInput');
// 维护内部状态：整数部分、小数部分、是否已输入小数点
let integerPart = '';
let decimalPart = '';
let hasDecimal = false;

input.addEventListener('input', (e) => {
  const currentValue = e.target.value;
  const inputLength = currentValue.length;
  const previousLength = integerPart.length + (hasDecimal ? 1 + decimalPart.length : 0);

  // 处理删除操作
  if (inputLength < previousLength) {
    if (hasDecimal) {
      if (decimalPart.length > 0) {
        decimalPart = decimalPart.slice(0, -1);
      } else {
        hasDecimal = false;
      }
    } else {
      integerPart = integerPart.slice(0, -1);
    }
    updateDisplay();
    return;
  }

  // 取最后一次输入的字符
  const lastChar = currentValue[inputLength - 1];
  // 只允许数字和单个小数点
  if (!/[0-9.]/.test(lastChar)) {
    updateDisplay();
    return;
  }

  // 处理小数点输入
  if (lastChar === '.') {
    if (!hasDecimal) {
      hasDecimal = true;
    }
    updateDisplay();
    return;
  }

  // 处理数字输入
  if (!hasDecimal) {
    // 避免整数部分前导多个0
    if (integerPart === '0' && lastChar === '0') {
      // 连续输入0，不更新内容
    } else if (integerPart === '0' && lastChar !== '0') {
      integerPart = lastChar;
    } else {
      integerPart += lastChar;
    }
  } else {
    // 小数部分最多保留两位
    if (decimalPart.length < 2) {
      decimalPart += lastChar;
    }
  }

  updateDisplay();
});

// 更新输入框显示内容
function updateDisplay() {
  const displayInteger = integerPart || '0';
  // 用字符串补全两位小数，避开禁止的方法
  const displayDecimal = decimalPart.padEnd(2, '0');
  input.value = `${displayInteger}.${displayDecimal}`;
}

// 初始化显示
updateDisplay();
</script>

效果验证（完全匹配你的需求） #

• 输入1 → 输入框显示1.00
• 再输入1 → 显示11.00
• 输入2 → 显示112.00
• 输入. → 仍显示112.00
• 输入5 → 显示112.50
• 输入6 → 显示112.56

关键细节说明 #

1. 纯字符串处理：用padEnd(2, '0')补全小数位，属于原生字符串操作，完全符合你避开toFixed/toLocaleString的要求
2. 删除逻辑兼容：逆向处理整数/小数部分，确保删除操作后显示仍保持正确格式
3. 非法输入过滤：只允许数字和单个小数点，避免无效输入干扰格式
4. 前导0处理：避免整数部分出现012这类不符合金额规范的格式

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