Question

我的页面上有几个按钮。在页面加载时，如果我按“ Enter”键，它将单击特定按钮。当用户在页面加载时点击“ Enter”时，我想单击另一个按钮。

我已经尝试过了：

HTML：

<button type="submit" (click)="submitted()" id="submit-btn"><span #defaultButton>Submit</span> </button>

Answer 1

您已尝试将按钮正确配置为type="submit"。

问题出在您视图中的所有其他按钮上。您需要将它们配置为type="button"才能正常工作。

Answer 2

您可以使用@HostListener来检测文档事件并覆盖它们。

  @ViewChild('defaultButton') defaultButton : ElementRef;

  @HostListener('document:keydown.enter', ['$event']) onKeydownHandler(event: KeyboardEvent) {
    event.preventDefault();
    this.defaultButton.nativeElement.click();
  }

以下是您的代码的实时示例：

https://stackblitz.com/edit/angular-vynxve

一个了解HostListener和HostBinding的好地方：

https://codecraft.tv/courses/angular/custom-directives/hostlistener-and-hostbinding/

Answer 3

<button type="submit" (keyup.enter)="submitted()" id="submit-btn"><span #defaultButton>Submit</span> </button>

按“ Enter”键应单击角度4中的特定按钮

3 个答案: