为什么按键事件在两个输入中不起作用？

Question

我使用angular，离子框架。我这样写HTML

<div><ion-input type="text" id="phoneNumber" [(ngModel)]="phoneNumber" (keypress)="phoneNumericCheck($event)" [disabled]="isSendParamDisabled" maxlength="11" placeholder="{{ 'TEXT.INPUT_FIELD_PHONE_NUMBER' | translate }}"></ion-input></div>

<ion-input [(ngModel)]="authNumber" type="text" id="Auth" maxlength="6" (keypress)="authNumericCheck($event)" placeholder="{{ 'TEXT.INPUT_FIELD_AUTH_NUMBER' | translate }}"></ion-input>

我在两个按键事件中使用了不同的函数，但 authNumber 有效，而 phoneNumber 无效。

如果我只使用一个按键事件，效果很好。不知道为什么。

事件函数内容相同

public phoneNumericCheck(event: any) {
    const pattern = /[0-9.,]/;
    let value = String.fromCharCode(event.charCode);
    let success = pattern.test(value);
    if(!success) {
      event.preventDefault();
      this.alertAboutOnlyNumeric();
    }
  }

而且这个活动有时不起作用...我不知道为什么

Answer 1

我可以建议对 phone 输入使用不同的方法吗？

<ion-input type="tel" autocomplete formControlName="phone"></ion-input>

this.registrationForm = this.fb.group({
  phone: ['', [Validators.required, Validators.pattern(PhoneNumberRegex)]],
});

对于 PhoneNumberRegex，您可以使用特定的 phone 数字格式（如 here）或简单地使用 ^[0-9]*$

为什么按键事件在两个输入中不起作用？

why keypress event is not worked in two input?

angular

typescript

ionic-framework

events

keypress