event.preventDefault()不会停止按键或上键事件。

Question

我试图使用一个模板变量从用户那里获取aadhar号码，由于aadhar是12位数，我需要在每4位数后显示空格。由于aadhar是12位数，我需要在每4位数后显示空格。此外，由于aadhar号码只包含数字，我创建了一个函数。numberOnly() 来阻止用户输入除数字以外的其他内容。以下是我写的代码。

index.html

<div class="container">
  <div class="row">
    <mat-label>Enter Aadhar Number</mat-label>
    <span class="text text-danger">*</span>
    <input matInput #aadharInput (keypress)="numberOnly($event)" (keyup)="checkSpaces(aadharInput)" maxlength="14" [value]="aadharInput.value">
  </div>
</div>

索引.ts

numberOnly(event){
    if(this.aadharNumber.length==12){
      event.preventDefault(); //doesn't stop the default behavior
    } else {
      let charCode = (event.which) ? event.which : event.keyCode;
      if (charCode >= 48 && charCode <= 57) {
        this.aadharLength = this.aadharLength + 1;
        return true;
      }
      return false;
    }
  }


  checkSpaces(aadharInput:HTMLInputElement){
    if(this.aadharLength==4 && aadharInput.value.length<14){
      aadharInput.value=aadharInput.value+' ';
      this.aadharLength=0;
    }else if(aadharInput.value.length==14){
      event.preventDefault()  //doesn't stop the default behavior
      for(let i = 0; i< 14; i++){
        if(aadharInput.value[i] != ' '){
          this.aadharNumber=this.aadharNumber+aadharInput.value[i];
        }
      }
      this.isAadharValid(this.aadharNumber);
    }
  }


  isAadharValid(aadhar:string){
    console.log("aadhar is: ", aadhar);
    console.log("aadhar length is: ", aadhar.length);
  }

我想实现的是，当长度为 aadharNumber 变成12。keypress 或 keyup 事件不应该被触发，这就是为什么我把 event.preventDefault() 的功能。然而，在输入栏中输入12位数字后，每当按下一个数字键，aadharNumber的值就会被更新，并且长度不断增加，变成了 24, 36, 48... 等等。

我还尝试使用 (keypress)="$event.preventDefault()" 的html中，它工作正常，而且根本不会有任何输入。所以，根据我的理解，由于调用 numberOnly() 的默认行为。keypress它不工作的方式，我希望它。那么，我如何停止 keypress 或 keyup 事件时 aadharNumber的长度变成12？