如何在 Angular 9 中按回车键触发按钮

Question

是否可以通过按键盘上的 enter 来触发我的“添加”按钮？

////

这是表格中的最后一个 div，第三个空缺：

  <div fd-form-item *ngIf="targetType.value != null">
    <label fd-form-label for="input-showroom-hostname" [required]="true">URL:</label>
    <fd-form-input-message-group>
      <input
        fd-form-control
        type="text"
        id="input-showroom-hostname"
        placeholder="e.g. l2w.demo.hybris.com"
        formControlName="hostname"
        [state]="determineFormControlState(hostname)"
      />
      <fd-form-message *ngIf="hasRequiredErrors(hostname)" [type]="'error'"> {{ REQUIRED }} </fd-form-message>
      <fd-form-message *ngIf="hasShowroomUserRightsErrors(hostname)" [type]="'error'"> {{ SHOWROOM_USER_RIGHTS }}</fd-form-message>
      <fd-form-message *ngIf="hasPatternErrors(hostname)" [type]="'error'"> {{ URL_PATTERN }} </fd-form-message>
    </fd-form-input-message-group>
  </div>
  <br />
</div>

Answer 1

是的，您应该添加用于检测按键事件的 HostListener 属性：

@HostListener('document:keypress', ['$event'])
keyEvent(event: KeyboardEvent) {
    if (event.keyCode === 13) {
        this.addShowroom();
    }
}

Answer 2

在最后一个输入元素和按钮上添加一个事件。在最后一个输入上使用 (keydown.enter)='add_showroom()'。

下面是这个想法的一些最小代码。如果需要，还可以检查 StackBlitz。

xx.component.html

<button (click)='add_showroom()'>Add</button><br>
<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
</select><br>
<input (keydown.enter)='add_showroom()' type='text'/>

xx.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public add_showroom() {
    alert('adding showroom');
  }
}

一些额外的提示：

在处理输入点击之前检查表单是否有效。
仅将 (keydown.enter)='add_showroom()' 添加到最后一个元素。一般来说，这比将它添加到一个区域或多个元素要好，因为这可能会导致使用 enter 导航到某处的人出现意外行为。或者使用 enter select 下拉列表中的值。
使用这个要非常小心。您的用户可能不希望通过点击输入来提交表单。所以在用户体验方面，它有点灰色地带。至少以某种方式通知您的用户这种行为。

如何在 Angular 9 中按回车键触发按钮

How to trigger button by pressing enter in Angular 9

enter

keydown

onkeydown

typescript

angular