Angular stop从提交输入密钥

发布时间：2020-12-17 17:24:11 所属栏目：安全来源：网络整理

导读：我试图阻止Enter提交我的按钮,而是让它指向另一个功能.我尝试通过Host Listener捕获Enter,然后对其执行preventDefault()以阻止它被触发. 我的组件中的模板如下所示： mat-dialog-content class="dialog-content"{{data.content | translate}}/mat-dialog-con

我试图阻止Enter提交我的按钮,而是让它指向另一个功能.我尝试通过Host Listener捕获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;
    }
}

解决方法

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();
}
...

Demo

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!