Question

我使用有角度的离子框架。我写了这样的 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

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

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

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

对于 PhoneNumberRegex，您可以使用特定的电话号码格式（例如 here）或简单地使用 ^[0-9]*$

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

1 个答案: