Angular Firefox 的 2/4 按键

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)。

The (keyup) event handler hears every keystroke.

有关详细信息，请参阅 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 方法中你需要 return 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.
    }
}

Angular Firefox 的 2/4 按键

Angular 2/4 keypress with Firefox

firefox

keypress

angular

修复您的 HTML 代码段