Enter 키가 클릭 이벤트를 트리거합니까?

Enter 키가 클릭 이벤트를 트리거합니까?

---

아래 코드 removeSelectedCountry()에서 span요소를 클릭 handleKeyDown($event)할 때 호출되어야하며 .NET Framework 에 keydown이벤트 가있을 때 호출되어야합니다 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]
})

그러나 키를 누를 때 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
    }    
}

---

ENTER 키의 경우 (keyup.enter)다음을 사용하지 마십시오 .

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

---

사용 (keyup.enter).

Angular는 주요 이벤트를 필터링 할 수 있습니다. Angular에는 키보드 이벤트에 대한 특수 구문이 있습니다. Angular의 keyup.enter의사 이벤트 에 바인딩하여 Enter 키만 수신 할 수 있습니다 .

---

Here is the correct SOLUTION! Since the button doesn't have a defined attribute type, angular maybe attempting to issue the keyup event as a submit request and triggers the click event on the button.

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

Big thanks to DeborahK!

Angular2 - Enter Key executes first (click) function present on the form

---

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

This works for me!

---

For angular 6 there is a new way of doing it. On your input tag add

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

Where keyUpFunction($event) is your function.

---

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

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

ReferenceURL : https://stackoverflow.com/questions/37936961/does-enter-key-trigger-a-click-event