wake-up-neo.com

In Angle2 löst die Eingabetaste ein Klickereignis auf der Seite aus?

Im folgenden Code sollte removeSelectedCountry() aufgerufen werden, wenn auf das span-Element geklickt wird, und handleKeyDown($event) sollte aufgerufen werden, wenn für das div ein keydown-Ereignis vorliegt.

@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]
})

removeSelectedCountry() wird jedoch jedes Mal aufgerufen, wenn die Eingabetaste gedrückt wird. 

Damit der Code funktioniert, musste ich das click-Ereignis in mousedown event ..__ ändern. Das funktioniert jetzt einwandfrei.

Kann jemand erklären, warum die Eingabetaste ein Klickereignis 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]
})

Klassenausschnitt hinzufügen

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
    }    
}
javascriptjqueryhtmleventsangular
42
Pranavi Chandramohan

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

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

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 uns an Angulars keyup.enter-Pseudoereignis binden.

30
Farhan

Hier ist die richtige -L&OUML;SUNG! Da die Schaltfläche keinen definierten Attributtyp besitzt, 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-Taste führt erste (Klick) Funktion aus, die auf dem Formular vorhanden ist

22
Andrew Lobban
@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!

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

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

Für Winkel 6 gibt es eine neue Möglichkeit, dies zu tun 

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

Wo keyUpFunction($event) Ihre Funktion ist.

0
Noluthando Khotle