我想使用离子角度显示关于离子输入焦点的建议工具提示

Question

在下面的代码中，密码建议工具提示在 keydown 事件触发时打开。但我想在离子输入元素的焦点上显示建议工具提示。

HTML

<label class="ci-ter-head ci-opc-50 ci-required">Password</label>
                              <ion-input type="{{feildType}}"  class="inputField" onFocus="passwordKeydown($event, 'signUpForm')"  [ngClass]="{'close-icon': validationVaribles.errorIconPassword, 'right-icon' : validationVaribles.successIconPassword }" [(ngModel)]="userSignUpInfo.password"
                              class="ci-form-field ci-sec-head">
                              <span *ngIf="!platform.is('ios')" [hidden] = "shPassword" (click)="showPassword($event);" style="margin-right: 5px;height: 28px;"><img src="../../assets/images/show.svg" height="28"></span>
                              <span *ngIf="!platform.is('ios')" [hidden] = "!shPassword" (click)="showPassword($event);" style="margin-right: 5px;height: 28px;"><img src="../../assets/images/hide.svg" height="28"></span>
                              </ion-input>
                              <div [ngClass]="commonService.onResize() ? 'ci-box-shadow' : 'ci-box-shadow'" *ngIf="passwordcomplexityHidden && userSignUpInfo.password != ''">
                                <ul>
                                  <li *ngIf="passwordcomplexity.isMinLen == false" class="ci-pt-5 ci-pb-5 ci-pl-10">- Be at least eight characters long</li>
                                  <li *ngIf="passwordcomplexity.isCapital == false" class="ci-pt-5 ci-pb-5 ci-pl-10">- Contain at least one uppercase letter </li>
                                  <li *ngIf="passwordcomplexity.isSmall == false" class="ci-pt-5 ci-pb-5 ci-pl-10">- Contain at least one lowercase letter</li>
                                  <li *ngIf="passwordcomplexity.isNumber == false" class="ci-pt-5 ci-pb-5 ci-pl-10">- Contain at least one numbers</li>
                                  <li *ngIf="passwordcomplexity.isSpecial == false" class="ci-pt-5 ci-pb-5 ci-pl-10">- Contain at least one special character</li>
                                </ul>
                              </div>

Answer 1

使用 ionFocus 设置属性以显示隐藏工具提示 *ngIf，您应该提及您使用的 ionic 版本。

.html

<ion-input type="password" [(ngModel)]="password" (ionFocus)="focus()" (ionBlur)="focusOut()"></ion-input>

.ts

focus(){
  this.showTooltip = true;
}

focusOut(){
  this.showTooltip = false;
}