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

Posted 2023-03-04

【中文标题】如何在ionic 5中使文本输入中的图标可点击

【英文标题】：how to make icon inside text input clickable in ionic 5

【发布时间】：2022-01-22 00:49:54

【问题描述】：

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

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

【参考方案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 */

---

参考文献

ion-button Ionic API Documentation

【讨论】：

我的 html 中不知道该项目

【参考方案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>

【参考方案3】：

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