Angular - 文本输入字段只接受手机中的数字

Question

In angular 9, I created an input field text which only accepts number using this code:

Html File:

<mat-form-field>
<mat-label>{{fields.label}}</mat-label>
<input
 pattern="[0-9]*"
 [formControlName]="fields.field"
 [id]="fields.field"
 [type]="'text'"
 (keypress)="numericOnly($event)"
 autocomplete="off"
 matInput>
</mat-form-field>

Typescript file:

numericOnly(event): boolean {
    return !isNaN(Number(event.key)) && event.key !== ' ';
  }

This code is working properly in DESKTOP web browser but my problem is when I access the site in MOBILE PHONE the input field doesn't only accepts numbers but accepts chars.

Please help me to solve this in mobile phones. I still need this to work in safari, chrome and mozilla mobile phone. Thanks guys..

Answer 1

// It will help you

numbersOnly(event) {
        const input = String.fromCharCode(event.keyCode);
        if (!/^[0-9]*$/.test(input)) {
            event.preventDefault();
        }
    }