Angular模拟ATM金额输入框遇0无法进位问题求助

DevOps 小满

2026-7-1

Angular ATM金额输入框问题解决

问题根源分析

你当前实现的问题出在两个核心点：

type=number输入框的自动格式化：number类型会自动忽略小数末尾的无效0，比如输入0.10会被自动转为0.1，导致后续输入的0无法被正确捕获和处理。
parseInt的潜在干扰：结合number类型的格式化，输入框的值可能出现前导0的字符串（如010），部分环境下parseInt会错误解析为八进制数，或直接丢失末尾数字，引发计算偏差。

替代实现方案

改用type=text输入框完全控制输入和显示逻辑，避免number类型的自动格式化干扰，具体实现如下：

HTML代码

<input 
  *ngIf="selectedState === 'amount'" 
  type="text" 
  class='name-input' 
  id='priceEntry' 
  name='priceEntry' 
  placeholder="Enter Amount" 
  (input)="onAmountInput($event)" 
  [value]="displayAmount"
>

组件TS代码

// 存储用户输入的原始数字字符串（仅保留数字字符）
rawInput: string = '';
// 格式化后的最终显示金额
displayAmount: string = '';

onAmountInput(event: Event) {
  const inputEl = event.target as HTMLInputElement;
  // 过滤所有非数字字符，仅保留用户输入的数字
  this.rawInput = inputEl.value.replace(/\D/g, '');

  if (!this.rawInput) {
    this.displayAmount = '';
    inputEl.value = '';
    return;
  }

  // 将原始数字转为目标金额（除以100），强制保留两位小数
  const amountNum = parseInt(this.rawInput, 10) / 100;
  let formatted = amountNum.toFixed(2);

  // 整数部分为0时，去掉前置的0，显示为".xx"格式
  if (amountNum < 1) {
    formatted = formatted.substring(1);
  }

  this.displayAmount = formatted;
  inputEl.value = this.displayAmount;
}