如何在离子5中使文本输入内的图标可点击

Question

我在文本输入中添加了一个图标，该图标应该是可点击的，但在文本输入中添加后它不再可点击

<ion-input (ionChange)="inputChanged($event)" [formControlName]="formCtrlName">
  <ion-icon [name]='eye-outline' (click)="togglePassword()" class="suffix-icon" </ion-icon>
</ion-input>

Answer 1

您需要将 <icon> 元素放在 <button> 元素中。

<ion-input (ionChange)="inputChanged($event)" [formControlName]="formCtrlName">
    <!-- In Ionic 4 version it is used as follows. -->
     <ion-button (click)="clickEventFunction($event, item.id)">
        <ion-icon [name]='eye-outline' (click)="togglePassword()" class="suffix-icon"</ion-icon>
    </ion-button>

     <!-- Used as below before "Ionic 4" release. -->
     <button (click)="clickEventFunction($event, item.id)">
        <ion-icon [name]='eye-outline' (click)="togglePassword()" class="suffix-icon"</ion-icon>
    </button>
</ion-input>

clickEventFunction(event: Event, id: any){
    /* Something */
}

参考资料

Answer 2

在你的 ts 文件中取一个布尔值：

showPass: boolean = false;

在html中：

<ion-item lines="none">
  <ion-input type="{{showPass ? 'text' : 'password'}}" placeholder="Password" (ionChange)="inputChanged($event)" [formControlName]="formCtrlName"></ion-input>
  <ion-icon name="eye-outline" slot="end" *ngIf="!showPass" (click)="showPass = !showPass"></ion-icon>
  <ion-icon name="eye-off-outline" slot="end" *ngIf="showPass" (click)="showPass = !showPass"></ion-icon>
</ion-item>

Answer 3

一种在离子输入中制作可点击图标的简单方法。

如何在离子5中使文本输入内的图标可点击

how to make icon inside text input clickable in ionic 5

html

css

ionic-framework

参考资料