In the code below removeSelectedCountry()
should be called when the span element is clicked and handleKeyDown($event)
should be called when there is a keydown event on the div.
在下面的代码中,当单击span元素时应调用removeSelectedCountry(),并且当div上有keydown事件时应调用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]
})
But removeSelectedCountry()
is called every time enter key is pressed.
但每次按下回车键时都会调用removeSelectedCountry()。
To make the code work I had to change the click event to mousedown
event. It works fine now.
为了使代码工作,我不得不将click事件更改为mousedown事件。它现在工作正常。
Can anyone explain why enter key would trigger click 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" (mousedown)="removeSelectedCountry(country)">
{{ country.name }}
</span>
</li>
</ul>
<div (keydown)="handleKeyDown($event)" class="CountryPicker-input"></div>
`,
providers: [CUSTOM_VALUE_ACCESSOR]
})
Adding class snipppet
添加类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
}
}
5 个解决方案
#1
89
For ENTER key, why not use (keyup.enter)
:
对于ENTER键,为什么不使用(keyup.enter):
@Component({
selector: 'key-up3',
template: `
<input #box (keyup.enter)="values=box.value">
<p>{{values}}</p>
`
})
export class KeyUpComponent_v3 {
values = '';
}
#2
22
Use (keyup.enter)
.
使用(keyup.enter)。
Angular can filter the key events for us. Angular has a special syntax for keyboard events. We can listen for just the Enter key by binding to Angular's keyup.enter
pseudo-event.
Angular可以为我们过滤关键事件。 Angular具有键盘事件的特殊语法。我们可以通过绑定到Angular的keyup.enter伪事件来监听Enter键。
#3
10
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.
这是正确的解决方案!由于该按钮没有已定义的属性类型,因此angular可能会尝试将keyup事件作为提交请求发出,并触发按钮上的click事件。
<button type="button" ...></button>
Big thanks to DeborahK!
非常感谢DeborahK!
Angular2 - Enter Key executes first (click) function present on the form
Angular2 - Enter Key执行表单上的第一个(单击)功能
#4
5
@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!
这适合我!
#5
3
<form (keydown)="someMethod($event)">
<input type="text">
</form>
someMethod(event:any){
if(event.keyCode == 13){
alert('Entered Click Event!');
}else{
}
}
#1
89
For ENTER key, why not use (keyup.enter)
:
对于ENTER键,为什么不使用(keyup.enter):
@Component({
selector: 'key-up3',
template: `
<input #box (keyup.enter)="values=box.value">
<p>{{values}}</p>
`
})
export class KeyUpComponent_v3 {
values = '';
}
#2
22
Use (keyup.enter)
.
使用(keyup.enter)。
Angular can filter the key events for us. Angular has a special syntax for keyboard events. We can listen for just the Enter key by binding to Angular's keyup.enter
pseudo-event.
Angular可以为我们过滤关键事件。 Angular具有键盘事件的特殊语法。我们可以通过绑定到Angular的keyup.enter伪事件来监听Enter键。
#3
10
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.
这是正确的解决方案!由于该按钮没有已定义的属性类型,因此angular可能会尝试将keyup事件作为提交请求发出,并触发按钮上的click事件。
<button type="button" ...></button>
Big thanks to DeborahK!
非常感谢DeborahK!
Angular2 - Enter Key executes first (click) function present on the form
Angular2 - Enter Key执行表单上的第一个(单击)功能
#4
5
@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!
这适合我!
#5
3
<form (keydown)="someMethod($event)">
<input type="text">
</form>
someMethod(event:any){
if(event.keyCode == 13){
alert('Entered Click Event!');
}else{
}
}