清除逗号按下的输入不会清除逗号

Question

当用户按下逗号(,)时,我正在尝试清除输入.所以我做的是,(keypress)我会检查它keyCode,如果它是逗号,我会通过设置输入值来清除输入input.value = ''.

但问题是,即使它清除了我输入的字母,它也不会清除逗号.我究竟做错了什么？

这是问题的一个小提琴.

脚步:

1. 输入(keypress).
2. 类型 keyCode
3. 观察input.value = ''已清除但输入仍然有(keypress).

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');
 }
}

我正在使用Angular 6.

Answer 1

添加preventDefault.

添加preventDefault()您的clearInput代码,如下所示:

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

在这里阅读更多关于preventDefault的 信息.

Answer 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/