如何修改PrimeNG InputNumber输入方向？实现金额式逐位输入

要实现这种无需手动输入小数点、自动从右往左填充的价格输入，核心思路是拦截用户输入的数字，将其作为整体整数处理后转换为两位小数格式，同时限制非数字输入。以下是具体实现方案：

1. 配置InputNumber基础属性 #

首先在模板中设置InputNumber的核心属性，禁用小数和负数输入，确保基础行为符合需求：

<p-inputNumber
  [(ngModel)]="price"
  [min]="0"
  [max]="999999.99" <!-- 可根据业务调整最大值 -->
  [step]="0.01"
  mode="decimal"
  locale="en-US"
  [allowDecimal]="false"
  [allowNegative]="false"
  (onInput)="handlePriceInput($event)"
  (onKeyDown)="handleKeyDown($event)"
></p-inputNumber>

2. 编写组件逻辑处理输入 #

在组件类中实现输入事件处理函数，核心是提取纯数字、转换为两位小数价格，并处理边界情况：

import { Component } from '@angular/core';

@Component({
  selector: 'app-price-input',
  templateUrl: './price-input.component.html'
})
export class PriceInputComponent {
  price = 0.00;
  private lastValidPrice = 0.00; // 缓存上一个有效值，用于异常恢复

  handlePriceInput(event: Event) {
    const inputEl = event.target as HTMLInputElement;
    // 过滤掉所有非数字字符，只保留纯数字串
    const numericStr = inputEl.value.replace(/[^0-9]/g, '');

    if (!numericStr) {
      // 无有效数字时重置为0.00
      this.price = 0.00;
      this.lastValidPrice = 0.00;
      inputEl.value = '0.00';
      return;
    }

    // 将数字串转为整数后除以100，得到两位小数的价格
    const newPrice = parseInt(numericStr, 10) / 100;
    if (newPrice <= 999999.99) {
      this.price = newPrice;
      this.lastValidPrice = newPrice;
    } else {
      // 超过最大值时恢复上一个有效值
      this.price = this.lastValidPrice;
    }

    // 强制格式化显示为两位小数，避免PrimeNG自动格式化的差异
    inputEl.value = this.price.toFixed(2);
  }

  handleKeyDown(event: KeyboardEvent) {
    // 仅允许数字键、退格、删除、箭头导航键和Tab键
    const allowedKeys = [
      '0','1','2','3','4','5','6','7','8','9',
      'Backspace','Delete','ArrowLeft','ArrowRight','Tab'
    ];
    if (!allowedKeys.includes(event.key)) {
      event.preventDefault(); // 阻止无效按键输入
    }
  }
}

3. 逻辑说明 #

• 输入拦截：通过handleKeyDown阻止非数字和必要控制键的输入，避免用户输入小数点、字母等无效内容。
• 数字转换：将用户输入的所有数字拼接成整数，再除以100自动生成两位小数格式，比如输入"126"会转为1.26，完全符合你要的从右往左填充逻辑。
• 边界处理：缓存上一个有效值，防止输入超过最大值时出现异常；无有效数字时自动重置为0.00。
• 格式强制：手动设置输入框显示值为两位小数，确保PrimeNG的自动格式化不会破坏预期显示效果。

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