如何处理特定页面提交按钮的输入按键功能-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&nbsp;(keydown.enter)="$event.stopPropagation()"></div>