event.preventDefault () не останавливает события нажатия клавиш или нажатия клавиш - PullRequest
Новая
       106

event.preventDefault () не останавливает события нажатия клавиш или нажатия клавиш

0 голосов
/ 02 мая 2020

Я пытаюсь получить номер пользователя от пользователя, используя переменную шаблона. Поскольку адхар имеет длину 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>

index.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 цифр в поле ввода при каждом нажатии клавиши di git значение aadharNumber обновляется, а длина продолжает увеличиваться до 24, 36, 48... и т. Д.

Я также пытался использование (keypress)="$event.preventDefault()" в html, которое отлично работает и вообще предотвращает ввод. Итак, насколько я понимаю, так как вызов numberOnly() не является поведением по умолчанию keypress, он не работает так, как я хочу. Так как мне остановить события keypress или keyup, когда длина aadharNumber становится 12?

...