es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Detectar un evento de clic en un ícono dentro de un campo de entrada en Angular.

28 Jul, 2023 Programación

He añadido un ion-icon con enlace dentro de un input


<ion-input (ionChange)="inputChanged($event)" [type]="inputType">
<ion-button fill="clear" (click)="togglePassword($event)">
<ion-icon [name]="isPasswordHidden ? 'eye-outline' : 'eye-off-outline'"> </ion-icon>
</ion-button>
</ion-input>

El problema es que el evento de clic en el icono solo se detecta cuando el input de texto no está en foco, una vez que el input está en foco y clicas en el icono, no se desencadena ningún evento de clic después de eso. ¿Cómo puedo detectar el evento de clic en el icono incluso cuando el input está en foco?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Una posible solución es agregar el método stopPropagation() al evento (click) del icono, lo cual evita que el evento se propague hasta el input y active su propio evento (click). Aquí está el código modificado:

    <ion-input (ionchange)="inputChanged($event)" [type]="inputType">
    <ion-button fill="clear">
        <ion-icon [name]="isPasswordHidden ? 'eye-outline' : 'eye-off-outline'" (click)="togglePassword($event); $event.stopPropagation();"></ion-icon>
    </ion-button>
</ion-input>

    Otra posible solución es envolver el icono dentro de su propio ion-button con un evento (click) separado. Aquí está el código modificado:

    <ion-input (ionchange)="inputChanged($event)" [type]="inputType">
    <ion-button fill="clear">
        <ion-icon [name]="isPasswordHidden ? 'eye-outline' : 'eye-off-outline'"></ion-icon>
    </ion-button>
    <ion-button fill="clear" (click)="togglePassword($event)">
        <ion-icon [name]="isPasswordHidden ? 'eye-outline' : 'eye-off-outline'"></ion-icon>
    </ion-button>
</ion-input>

    De esta manera, el primer ion-button con el icono solo se encarga de mostrar el icono, mientras que el segundo ion-button con el evento (click) se encarga de alternar la visibilidad de la contraseña.

Comments are closed.