Löst die Eingabetaste ein Klickereignis aus?

Im folgenden Code removeSelectedCountry()sollte aufgerufen werden, wenn auf ein spanElement geklickt wird, und handleKeyDown($event)sollte aufgerufen werden, wenn sich ein keydownEreignis auf einem befindet div.

@Component({
    selector: "wng-country-picker",
    template: `
    <ul class="CountryPicker-selected" *ngIf="selectedCountries.length > 0">
    <li *ngFor="let country of selectedCountries">
        <span class="Pill Pill--primary" (click)="removeSelectedCountry(country)">
        {{ country.name }}
        </span>
    </li>
    </ul> 
    <div (keydown)="handleKeyDown($event)" class="CountryPicker-input"></div>
`,
providers: [CUSTOM_VALUE_ACCESSOR]
})

Wird removeSelectedCountry()aber jedes Mal aufgerufen, wenn die EnterTaste gedrückt wird.

Damit der Code funktioniert, musste ich das clickEreignis in mousedownEreignis ändern . Es funktioniert jetzt gut.

Kann jemand erklären, warum der EnterSchlüssel das clickEreignis auslösen würde ?

@Component({
    selector: "wng-country-picker",
    template: `
    <ul class="CountryPicker-selected" *ngIf="selectedCountries.length > 0">
    <li *ngFor="let country of selectedCountries">
        <span class="Pill Pill--primary" (mousedown)="removeSelectedCountry(country)">
        {{ country.name }}
        </span>
    </li>
    </ul> 
    <div (keydown)="handleKeyDown($event)" class="CountryPicker-input"></div>
`,
providers: [CUSTOM_VALUE_ACCESSOR]
})

Hinzufügen eines Klassen-Snipppet:

export class CountryPickerComponent {

private selectedCountries: CountrySummary[] = new Array();

private removeSelectedCountry(country: CountrySummary){
    // check if the country exists and remove from selectedCountries
    if (this.selectedCountries.filter(ctry => ctry.code === country.code).length > 0)
    {
        var index = this.selectedCountries.indexOf(country);
        this.selectedCountries.splice(index, 1);
        this.selectedCountryCodes.splice(index, 1);
    }
}

private handleKeyDown(event: any)
{
    if (event.keyCode == 13)
    {
       // action
    }
    else if (event.keyCode == 40)
    {
        // action
    }  
    else if (event.keyCode == 38)
    {
        // action
    }    
}

Verwenden Sie für die EINGABETASTE Folgendes (keyup.enter):

@Component({
  selector: 'key-up3',
  template: `
    <input #box (keyup.enter)="values=box.value">
    <p>{{values}}</p>
  `
})
export class KeyUpComponent_v3 {
  values = '';
}

Hier ist die richtige LÖSUNG ! Da die Schaltfläche keinen definierten Attributtyp hat, versucht Angular möglicherweise, das Keyup-Ereignis als Übermittlungsanforderung auszugeben, und löst das Klickereignis auf der Schaltfläche aus.

<button type="button" ...></button>

Vielen Dank an DeborahK!

Angular2 - Enter Key führt die erste (Klick-) Funktion aus, die im Formular vorhanden ist

Verwenden Sie (keyup.enter).

Angular kann die wichtigsten Ereignisse für uns filtern. Angular hat eine spezielle Syntax für Tastaturereignisse. Wir können nur auf die Eingabetaste warten, indem wir an Angulars keyup.enterPseudoereignis binden .

Für Winkel 6 gibt es eine neue Methode. Fügen Sie auf Ihrem Eingabe-Tag hinzu

(keyup.enter)="keyUpFunction($event)"

Wo keyUpFunction($event)ist deine Funktion?

@Component({
  selector: 'key-up3',
  template: `
    <input #box (keyup.enter)="doSomething($event)">
    <p>{{values}}</p>
  `
})
export class KeyUpComponent_v3 {
  doSomething(e) {
    alert(e);
  }
}

Das funktioniert bei mir!

<form (keydown)="someMethod($event)">
     <input type="text">
</form>

someMethod(event:any){
   if(event.keyCode == 13){
      alert('Entered Click Event!');
   }else{
   }
}

Was mich persönlich für mich nutzbar macht, ist:

(mousedown)="callEvent()" (keyup.enter)="$event.preventDefault()

keyup.enter verhindert, dass das Ereignis beim Keyup ausgelöst wird, aber es tritt immer noch bei Keydown auf, was für mich funktioniert.