Блог

В приведенном ниже коде всплывающая подсказка с предложением пароля открывается при срабатывании события 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 amp;amp; 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>
 

используйте 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;
}