PrimeNG与Angular中按回车键触发登录按钮点击的实现方法

下面是几个可行的实现方式，针对你遇到的回车触发登录无效的问题：

方案1：使用表单结合submit按钮（推荐） #

用<form>包裹所有表单元素，将p-button设置为type="submit"，并绑定表单的ngSubmit事件。这种方式符合HTML表单原生行为，兼容性最好。

<form (ngSubmit)="login()" class="Login">
  <label>Email</label>
  <!-- 注意：type应设为text，而非username -->
  <input id="email" name="email" type="text" pInputText [(ngModel)]="username" />

  <label>Password</label>
  <p-password name="password" [(ngModel)]="password" [feedback]="false" [toggleMask]="true"></p-password>

  <p-button label="Login" class="button-login" type="submit"></p-button>
</form>

说明：你之前尝试表单包裹无效，大概率是没给按钮设置type="submit"，或是错误绑定了click事件而非ngSubmit。

方案2：给输入框绑定keyup.enter事件 #

直接在邮箱和密码输入框上绑定keyup.enter事件触发登录方法。相比keypress.enter，keyup事件在PrimeNG组件上的触发更稳定。

<div class="Login">
  <label>Email</label>
  <input id="email" name="email" type="text" pInputText [(ngModel)]="username" (keyup.enter)="login()" />

  <label>Password</label>
  <p-password name="password" [(ngModel)]="password" [feedback]="false" [toggleMask]="true" (keyup.enter)="login()"></p-password>

  <p-button label="Login" class="button-login" (onClick)="login()"></p-button>
</div>

方案3：全局监听回车事件（可选） #

如果需要在登录表单范围内，任意输入框按下回车都触发登录，可以在组件类中添加全局监听：

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

@Component({
  // 组件元数据
})
export class LoginComponent {
  username: string = '';
  password: string = '';

  login() {
    // 你的登录逻辑
  }

  @HostListener('document:keyup.enter', ['$event'])
  handleEnterKey(event: KeyboardEvent) {
    // 仅当焦点在Login容器内时触发
    const loginContainer = document.querySelector('.Login');
    if (loginContainer?.contains(event.target as Node)) {
      this.login();
    }
  }
}

内容的提问来源于stack exchange，提问作者Luis González