如何让两个输入框响应同一回车键触发事件？

Got it, let's streamline this so you only need one Enter keypress to record both start and end times. Here's how to adjust your Angular code step by step:

Step 1: Update the Template #

First, we'll remove the individual (keyup.enter) events from each input and bind a single submit handler to either the parent container or the final input (whichever fits your user flow better). We'll also fix a small binding issue with your getCurrentTime() method:

<!-- Option 1: Bind to parent div (triggers on Enter in either input) -->
<div (keyup.enter)="submitTimes()">
  <label style="font-size: 14px">Start Time: </label>
  <input #StartTime id="Stime" type="time" value="09:00"/><br>
  <label style="font-size: 14px">End Time: </label>
  <input #EndTime id="Etime" type="time" style="margin:10px" [value]="getCurrentTime()"/>
</div>

<!-- Option 2: Bind only to the End Time input (triggers when user finishes the last field) -->
<div>
  <label style="font-size: 14px">Start Time: </label>
  <input #StartTime id="Stime" type="time" value="09:00"/><br>
  <label style="font-size: 14px">End Time: </label>
  <input #EndTime id="Etime" type="time" style="margin:10px" [value]="getCurrentTime()" (keyup.enter)="submitTimes()"/>
</div>

Note: I changed value="getCurrentTime()" to [value]="getCurrentTime()"—Angular needs square brackets for property binding to execute the method, otherwise it'll just use the string "getCurrentTime()" as the input value.

Step 2: Add the Component Logic #

Next, use @ViewChild to reference the two inputs, then create a single handler to grab both values when Enter is pressed:

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

@Component({
  // Your component's selector, templateUrl, etc.
})
export class YourComponent {
  // Get references to the input elements using their template variables
  @ViewChild('StartTime') startTimeInput!: ElementRef<HTMLInputElement>;
  @ViewChild('EndTime') endTimeInput!: ElementRef<HTMLInputElement>;

  getCurrentTime(): string {
    // Example implementation to return current time in HH:mm format
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    return `${hours}:${minutes}`;
  }

  submitTimes() {
    // Grab both values in one go
    const startTime = this.startTimeInput.nativeElement.value;
    const endTime = this.endTimeInput.nativeElement.value;

    // Replace this with your actual logic to record the times
    console.log('Start Time:', startTime);
    console.log('End Time:', endTime);
    
    // If you need to reuse your original function1, adjust it to accept both parameters:
    // this.function1(startTime, endTime);
  }
}

How It Works #

• By moving the (keyup.enter) event to a parent container or the final input, we ensure one keypress triggers the action.
• @ViewChild lets us access the input elements directly from the component, so we can fetch both values without needing to pass them through the event.
• The fixed [value] binding ensures your getCurrentTime() method actually runs and sets the default end time correctly.

内容的提问来源于stack exchange，提问作者user9646441