Question

我在Firefox 57中使用Angular 4，我有以下输入字段：

<input mdbActive type="tel" id="phoneNumber" class="form-control" [(ngModel)]="userdetail.phoneNumber" required (keypress)="restrictNumberInput($event)" (paste)="false">

后端代码是：

restrictNumberInput(event: any) {
    let regexStr = '^[0-9]+$';
    let e = <KeyboardEvent>event;
    if ([8, 9, 27, 13, 190].indexOf(e.keyCode) !== -1 ||
        // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) ||
        // Allow: Ctrl+C
        (e.keyCode == 67 && e.ctrlKey === true) ||
        // Allow: Ctrl+V
        (e.keyCode == 86 && e.ctrlKey === true) ||
        // Allow: Ctrl+X
        (e.keyCode == 88 && e.ctrlKey === true)) {// ||
        // Allow: home, end, left, right
        //(e.keyCode >= 35 && e.keyCode <= 39)) {
        // let it happen, don't do anything
        return;
    }

    let ch = String.fromCharCode(e.keyCode);
    let regEx = new RegExp(regexStr);
    if (regEx.test(ch))
        return;
    else
        e.preventDefault();
}

我在这段代码的第一行添加了一个断点，但它并没有停止。

当我按任意键时，restrictNumberInput函数不会运行。为什么会这样？

Answer 1

我相信你正在寻找的是Angular 2 +中的(keyup)。

（keyup）事件处理程序会听到每次击键。

有关详情，请参阅Angular网站上的用户输入指南： https://angular.io/guide/user-input#key-event-filtering-with-keyenter

修复HTML代码段

只需将(keypress)更改为(keyup)即可修复您提供的示例。

<input mdbActive type="tel" id="phoneNumber" class="form-control" [(ngModel)]="userdetail.phoneNumber" required (keyup)="restrictNumberInput($event)" (paste)="false">

Answer 2

您可以通过以下两部分打破绑定来实现此目的：

<input mdbActive type="tel" id="phoneNumber" class="form-control" [ngModel]="userdetail.phoneNumber" required (ngModelChange)="restrictNumberInput($event)" (paste)="false"/> {{userdetail.phoneNumber}}

Answer 3

您需要使用keyup事件来收听键盘事件另外，在restrictNumberInput方法中，您需要在限制的基础上返回true / false。

restrictNumberInput(event: KeyboardEvent) {
   if(condition_to_allow_numbers) {
      return true; // This will allow user input to be entered
    } else {
      return false; // This won't allow user input to be entered.
    }
}

使用Firefox的Angular 2/4按键

3 个答案:

修复HTML代码段