如何处理特定页面提交按钮的输入按键功能-Angular？

Question

我已经实现了类似的功能，同时在应按提交按钮的任何形式的位置单击Enter键。现在，此功能可以正常工作，但问题出在我的窗体的顶部，在某些情况下将打开一个模式窗口。在该窗口上，如果用户单击Enter，它将击中后台表单提交按钮。在这里，我期望在关闭模式之前不应该点击“提交”按钮。在这里，我无法控制模式上的Enter键。这是我的代码段：@HostListener('document:keydown', ['$event'])  keyboardInput(event: KeyboardEvent) {    this.onKeydown(event);  }    onKeydown(event:KeyboardEvent):void {    if (event.keyCode === 13) {     this.submit();    }  }

Answer 1

您需要修改条件以检查模态是否打开，如

if (event.keyCode === 13 && isModalOpen)  //maintain the state of modal in isModalOpen property

    this.submit()

else

    this.modalSubmit();

Answer 2

IMK默认情况下，表单中Enter键事件的默认操作是提交表单。您无需为此做任何额外的事情。

为防止在模式打开时提交表单，请停止传播key enter事件。可以说，模态的最外层HTML元素是div，您将以下内容添加到div中

<div (keydown.enter)="$event.stopPropagation()"></div>