Angular stop从提交输入密钥

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的信息的有效负载.可以在任何输入事件上使用它,即(输入),(keydown),(点击)等.

可以跳过使用Hostlistner并对$ event应用preventDefault,如下所示:

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

在按钮上:

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

要么:

HTML:

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

打字稿:

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

演示

Answer 2

如果您使用的是表单，您可以keydown.enter在主标记中使用事件来阻止它：

<form [formGroup]="..." (keydown.enter)="$event.preventDefault()">
...
</form>

但也许您还想阻止其他一些组合键，例如：

(keydown.enter)="$event.preventDefault()"
(keydown.shift.enter)="$event.preventDefault()"
(keydown.control.enter)="$event.preventDefault()"
(keydown.alt.enter)="$event.preventDefault()"