Ввод Angular2 принимает только число при наборе текста, но не делает то же самое при копировании

Question

Я создал поле ввода, как показано ниже в Angular2, которое должно принимать только цифры.

HTML

<input type="text" name="streetCode" ngModel [maxlength]="2" (keypress)="onlyNumber($event)">

typescipt

onlyNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

Приведенный выше код работает нормально и позволяет вводить только цифры с клавиатуры, но проблема в том, что когда я копирую вставку какого-либо алфавитного символа в поле ввода, он разрешает алфавиты.

Обновление 1: На самом деле, когда я говорю «копировать вставку», это происходит через копирование мышью, а не через клавиатуру.

Может кто-нибудь, пожалуйста, помогите мне в этом

Обновление 2

Сейчас я изменил код, как показано ниже. Не знаю, правильный ли это подход:

  onlyNumber(evt) {
    if (evt.type === 'paste') {
      let content = evt.clipboardData.getData('Text');
      if (isNaN(content)) {
        evt.preventDefault();
      }
    }
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
      evt.preventDefault();
    }
  }

HTML

<input type="text" name="streetCode" ngModel [maxlength]="2" (keypress)="onlyNumber($event)" (paste)="onlyNumber($event)">

Answer 1

Теоретически, события keydown и keyup представляют собой нажатие или отпускание клавиш, а событие keypress представляет вводимый символ.Реализация теории не одинакова во всех браузерах.

Так что я предполагаю, что рекомендуется использовать keydown/keyup события вместо keypress, если вы также хотите прослушивать событие вставки, если вы не хотитеиспользуйте type="number" вместо текста.

Answer 2

Ваша функция onlyNumber будет срабатывать только при нажатии клавиши Вот почему он не работает с копировальной пастой

Попробуйте использовать ngModelChange вместо нажатия клавиши

Answer 3

Почему бы вам не использовать type = "number" вместо текста. В этом случае вам не нужно событие нажатия клавиши. Это чистый синтаксис HTML.