我试图阻止Enter提交我的按钮,而是让它指向另一个功能.我尝试通过Host Listener捕获Enter,然后对其执行preventDefault()以阻止它被触发.
@H_301_28@解决方法
我的组件中的模板如下所示：
<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();
}
...
