javascript - Angular 停止 Enter Key 提交

Question

我试图阻止 Enter 提交我的按钮，而是让它指向另一个函数。我尝试通过主机监听器捕获 Enter，然后对其执行 preventDefault() 以阻止它触发。

我的组件中的模板如下所示:

<mat-dialog-content class="dialog-content">{{data.content | translate}}</mat-dialog-content>
<div>
  <mat-button-toggle-group>
    <button type="button" matDialogClose (click)="dialogRef.close()">{{uppercase }}</button>
    <button type="button" (click)="dialogRef.close(true)" cdkFocusInitial>{{uppercase}}</button>
  </mat-button-toggle-group>
</div>

在我的组件代码的顶部:

export enum KEY_CODE {
  ENTER_KEY = 13
}

在我的导出类中:

@HostListener('window:keyup', ['$event'])
keyEventUp(event: KeyboardEvent) {

    if (event.keyCode === KEY_CODE.ENTER_KEY) {
      event.preventDefault();
      event.stopPropagation();
      return false;
    }
}

Answer 1

DOM 事件携带一个名为 $event 的信息负载。可以在任何输入事件上使用它，即 (input)、(keydown)、(click) 等。

可以跳过 HoSTListner 的使用并在 $event 上应用 preventDefault，如下所示:

(keydown.enter)="$event.preventDefault()"

在按钮上:

...
<button ... (keydown.enter)="$event.preventDefault()" ...>...</button>
...

或:

HTML:

...
<button ... (keydown.enter)="prevent($event)" ...>...</button>
...

typescript :

...
prevent(event){
 event.preventDefault();
}
...

Demo