如何使用 Angular 9 中的 Enter 键触发函数

Question

我有一个带有(click)事件的按钮，该按钮当前触发 Angular 组件中的一个方法，该方法运行良好，但如果用户从输入框中点击 Enter 键，我还需要触发相同的方法，以便用户可以选择。

这是我用于输入和按钮的 HTML：

<div class="input-group input-group-sm mt-3">
    <input autocomplete="off" list="autocompleteOff" type="text" class="form-control" placeholder="E.G. 'What is a beneficary?'" aria-label="Ask" [(ngModel)]="userQuestion" id="userQuestion" name="userQuestion" [ngStyle]="{'background-color': brand?.colours.secondary, 'color': brand?.colours.primary}">
    <div class="input-group-append">
      <button id="user-btn" class="btn btn-secondary" type="button" (click)="askQuestion()" [ngStyle]="{'background-color': brand?.colours.primary, 'color': brand?.colours.secondary}">Ask</button>
    </div>
  </div>

我可以从 HTML 端执行此操作，还是需要为 Enter 键设置侦听器？

Answer 1

您可以使用keyup.enter ：

<input (keyup.enter)="askQuestion()"/>

Answer 2

您可以将按钮元素type属性编辑为type="submit" 。

Answer 3

这已经在单击 Enter 键时<input ng-keyup="$event.keyCode == 13 ? MyFunc() : null" >方法中得到了回答<input ng-keyup="$event.keyCode == 13 ? MyFunc() : null" >