在移动电话中仅接受数字的Angular -Text输入字段

Question

在angular 9中，我使用以下代码创建了一个输入字段文本，它只接受数字：

Html文件：

<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文件：

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

这段代码在桌面web浏览器中工作正常，但我的问题是，当我在手机中访问网站时，输入字段不仅接受数字，还接受字符。

请在手机上帮我解决这个问题。我仍然需要这个在safari，chrome和mozilla手机上工作。谢谢你们..。

Answer 1

//对您有帮助

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