javascript - agregar - ¿La tecla Enter activa un evento de clic?

angular html include

Question

En el siguiente código, se debe llamar a handleKeyDown($event) cuando se hace clic en un elemento span y se debe handleKeyDown($event) cuando hay un evento keydown en un 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]
})

Pero se llama a removeSelectedCountry() cada vez que se presiona la tecla Enter .

Para que el código funcione, tuve que cambiar el evento de click evento de mousedown . Funciona bien ahora.

¿Alguien puede explicar por qué la tecla Intro activaría el evento de 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]
})

Agregar fragmento de clase:

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
    }    
}

Answer 1

¡Aquí está la SOLUCIÓN correcta! Dado que el botón no tiene un tipo de atributo definido, angular puede intentar emitir el evento keyup como una solicitud de envío y activa el evento click en el botón.

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

Muchas gracias a DeborahK!

Angular2: la tecla Intro ejecuta la primera función (clic) presente en el formulario

Answer 2

Para angular 6 hay una nueva forma de hacerlo. En su etiqueta de entrada agregue

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

Donde keyUpFunction($event) es su función.

Answer 3

Para la tecla ENTER, por qué no usar (keyup.enter) :

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

Answer 4

Uso (keyup.enter) .

Angular puede filtrar los eventos clave para nosotros. Angular tiene una sintaxis especial para eventos de teclado. Podemos escuchar solo la tecla Enter keyup.enter al keyup.enter de Angular.

Answer 5

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

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

Answer 6

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

Esto funciona para mi!