javascript - Enter कुंजी ट्रिगर एक क्लिक घटना है?




angular jquery (4)

नीचे दिए गए कोड में removeSelectedCountry() को तब बुलाया जाना चाहिए जब किसी span एलिमेंट को क्लिक किया गया हो और handleKeyDown($event) को 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]
})

लेकिन हर बार Enter कुंजी दबाए जाने पर removeSelectedCountry() कहा जाता है।

कोड काम करने के लिए, मुझे 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)

कोणीय हमारे लिए प्रमुख घटनाओं को फ़िल्टर कर सकता है। कोणीय में कीबोर्ड इवेंट के लिए एक विशेष सिंटैक्स है। हम केवल कोणीय की keyup.enter छद्म घटना से बांधकर कुंजी दर्ज करने के लिए सुन सकते हैं।


यहाँ सही समाधान है ! चूंकि बटन में परिभाषित विशेषता प्रकार नहीं है, इसलिए कोणीय घटना को सबमिट अनुरोध के रूप में जारी करने का प्रयास किया जा सकता है और बटन पर क्लिक घटना को ट्रिगर करता है।

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

दबोरा के लिए बड़ा धन्यवाद!

Angular2 - Enter कुंजी पहले (क्लिक करें) फार्म पर मौजूद कार्य करती है


<form (keydown)="someMethod($event)">
     <input type="text">
</form>
someMethod(event:any){
   if(event.keyCode == 13){
      alert('Entered Click Event!');
   }else{
   }
}





events