I am trying to stop the Enter from submitting my button and rather make it point to another function. I tried trapping the Enter via the Host Listener and then do preventDefault()
on it to stop it from firing.
我的组件中的模板如下所示:
<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>
...
or:
HTML:
...
<button ... (keydown.enter)="prevent($event)" ...>...</button>
...
打字稿:
...
prevent(event){
event.preventDefault();
}
...
Demo https://stackblitz.com/edit/angular-9zwhfg
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)