Как очистить входное значение при нажатии какой-либо кнопки?

Я пытаюсь очистить ввод, когда пользователь нажимает запятую (,). Итак, что я сделал, в (keypress) я бы проверил keyCode и, если это запятая, я бы очистил ввод, установив значение ввода input.value = ''.

HTML:

<input type="text" #elem (keypress)="clearInput($event)">

Код:

@ViewChild( 'elem' ) public element;

clearInput( e: KeyboardEvent ) {
 if ( e.keyCode === 44 ) {
    this.element.nativeElement.value = '';
 } else {
   console.log('Not a comma');
 }
}

Ответ 1

Use Event.preventDefault().

Добавьте preventDefault() в свой код clearInput, как показано ниже:

clearInput (e: KeyboardEvent) {
   if (e.keyCode === 44) {
      e.preventDefault();     // <-- Here
      this.element.nativeElement.value = '';
   } else {
      console.log('Not a comma');
   }
}

Ответ 2

Просто return false если запятая нажата:

class HomeComponent {
  @ViewChild('elem') public element;
  clearInput(e: KeyboardEvent) {
    if (e.keyCode === 44) {
      this.element.nativeElement.value = '';
      return false;
    } else {
      console.log('Not a comma');
    }
  }
}

JSFiddle: https://jsfiddle.net/lucakiebel/zrehcwfy/1/

Ответ 3

Вам нужно сделать 2 незначительных изменения:

Используйте событие keyup для получения последнего введенного ключа и включения в значение input
Используйте e.key === ',' в if

Вот работающий JSFIDDLE