如何通过在Angular 9中按回车触发按钮答案

【问题标题】：How to trigger button by pressing enter in Angular 9如何通过在Angular 9中按回车触发按钮
【发布时间】：2020-07-27 07:58:04
【问题描述】：

是否可以通过按键盘上的 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>

【问题讨论】：

是的，它是：(keydown.enter)="addShowroom()"
不需要任何东西来使它工作。 button 元素已经触发 click 处理程序，当您在此按钮处于焦点时按 enter 时。无需更改
能否提供更多来自component.html和component.ts的代码，以便我们推断上下文？
我添加了完整的html
对我来说很好用：stackblitz.com/edit/angular-ivy-t49oov 按钮是否被禁用，是否有焦点？

标签： angular typescript keydown enter onkeydown

【解决方案1】：

在最后一个输入元素和按钮上添加一个事件。在最后一个输入上使用(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 从下拉列表中选择一个值。
使用它时要非常小心。您的用户可能不希望输入单击来提交表单。所以在用户体验方面它有点灰色地带。至少以某种方式通知您的用户这种行为。

【讨论】：

【解决方案2】：

是的，你应该添加 HostListener 属性来检测按键事件：

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

【讨论】：

只是在这里添加一件事。 keyCode 已弃用。你可以使用event.key === "Enter"