Angular数字输入框仅允许数字输入的功能异常排查与解决

问题分析与修复方案 #

1. input事件获取值带单引号

原实现用input事件时，mask插件的格式化会导致event.data出现异常单引号。改用keydown事件直接捕捉按键，绕过mask的提前干扰，精准控制输入内容。

2. 退格/失焦自动添加.00

原onFixedAmount对所有非空值强制加.00，调整逻辑：仅当输入为非0有效数字时保留两位小数，空值或0则保持为0，避免退格后不必要的小数格式化。

3. 初始值0按非数字键变空

非数字输入时直接阻止默认行为，同时保持输入框值为0，不再设置为空。

4. 删除最后数字退格报错

退格时event.data为null，原代码直接调用replace导致报错。改用keydown事件后，通过判断按键类型处理退格逻辑，避免访问null属性。

修正后的完整代码 #

HTML代码

<input type="text" class="someclass" [readOnly]="isView || isEdit" placeholder=""
    formControlName="somename" 
    (keydown)="handleKeyDown($event)" 
    (focusout)="onFixedAmount('somename')">
<label class="label">Some Label$</label>

注：移除了原mask相关属性，避免与自定义输入逻辑冲突。若需千分位显示，可在格式化方法中自行实现。

TypeScript代码

handleKeyDown(event: KeyboardEvent) {
    const inputElement = event.target as HTMLInputElement;
    const controlName = inputElement.getAttribute('formControlName');
    if (!controlName) return;

    const control = this.myformname.controls[controlName];
    const currentValue = control.value || 0;

    // 允许必要的控制键：退格、删除、方向键、Tab
    const allowedControlKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'];
    if (allowedControlKeys.includes(event.key)) {
        // 退格特殊处理：单个非0数字退格后重置为0
        if (event.key === 'Backspace' && currentValue.toString().length === 1 && currentValue !== 0) {
            control.setValue(0);
            event.preventDefault();
        }
        return;
    }

    // 仅允许数字键输入
    if (!/^\d$/.test(event.key)) {
        event.preventDefault();
        // 初始值为0时保持不变
        if (currentValue === 0) {
            control.setValue(0);
        }
        return;
    }

    // 初始值为0时，替换为输入的数字
    if (currentValue === 0) {
        control.setValue(event.key);
        event.preventDefault();
    }
}

onFixedAmount(controlName: string) {
    const control = this.myformname.controls[controlName];
    let amount = control.value;

    if (amount === '') {
        control.setValue(0);
        return;
    }

    const numValue = Number(amount);
    if (!isNaN(numValue)) {
        // 0保持原样，其他数字保留两位小数
        control.setValue(numValue === 0 ? 0 : numValue.toFixed(2));
    } else {
        control.setValue(0);
    }
}

可选：添加千分位格式化 #

如果需要千分位显示，可新增格式化函数并修改onFixedAmount：

// 千分位格式化函数
private formatNumberWithCommas(num: number): string {
    if (num === 0) return '0';
    return num.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

onFixedAmount(controlName: string) {
    const control = this.myformname.controls[controlName];
    let amount = control.value;

    if (amount === '') {
        control.setValue(0);
        return;
    }

    const numValue = Number(amount);
    if (!isNaN(numValue)) {
        control.setValue(numValue === 0 ? 0 : this.formatNumberWithCommas(numValue));
    } else {
        control.setValue(0);
    }
}

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