web-dev-qa-db-ja.com

Enterキーはクリックイベントをトリガーしますか？

以下のコードでは、span要素がクリックされたときにremoveSelectedCountry()を呼び出し、keydownでdivイベントが発生したときにhandleKeyDown($event)を呼び出す必要があります。

@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()は毎回呼び出されます Enter キーが押されました。

コードを機能させるには、clickイベントをmousedownイベントに変更する必要がありました。今は正常に動作します。

誰でも理由を説明できますか Enter キーはclickイベントをトリガーしますか？

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

クラススニペットの追加：

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
    }    
}
angulardom-events
50
Pranavi Chandramohan

Enterキーの場合は、(keyup.enter)を使用しないでください：

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

(keyup.enter)を使用します。

Angularは、重要なイベントをフィルタリングできます。 Angularには、キーボードイベント用の特別な構文があります。 Angularのkeyup.enter疑似イベントにバインドすることにより、Enterキーのみをリッスンできます。

32
Farhan

正しいソリューション！ボタンには定義済みの属性タイプがないため、angularは、キーアップイベントを送信要求として発行し、ボタンのクリックイベントをトリガーしようとしている可能性があります。

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

DeborahKに感謝します！

Angular2-フォームに存在する最初の（クリック）関数を実行するEnterキー

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

これは私のために働く！

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

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

angular 6には、新しい方法があります。入力タグに追加します

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

keyUpFunction($event)は関数です。

1
Noluthando K