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>

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

2 个答案: