Ionic Angular如何实现ion-input聚焦时显示建议提示框

问题根因 #

当前代码存在两个核心限制导致仅按键时才显示提示：

1. ion-input使用了原生onFocus事件绑定，Ionic 自定义表单组件需使用专属的ionFocus事件才能稳定捕获焦点状态
2. 提示框的显示条件添加了userSignUpInfo.password != ''限制，仅当输入框有内容时才会渲染，自然只有按键输入后才会触发展示

具体修改步骤 #

1. 调整组件TS逻辑 #

新增焦点状态变量，调整事件处理逻辑：

// 组件类中新增变量
isPwdFocused: boolean = false;

// 保留原有passwordKeydown的校验逻辑不变，新增以下两个方法
onPasswordFocus() {
  this.isPwdFocused = true;
  // 触发原有校验逻辑，保证聚焦时立即初始化提示内容
  this.passwordKeydown(null, 'signUpForm');
}

onPasswordBlur() {
  // 失焦后如果密码为空则隐藏提示，有内容可保留展示校验结果，可按需调整
  this.isPwdFocused = !!this.userSignUpInfo?.password?.length;
}

2. 修改HTML模板代码 #

替换事件绑定、调整提示框显示条件：

<label class="ci-ter-head ci-opc-50 ci-required">Password</label>
<ion-input 
  type="{{feildType}}"  
  class="inputField ci-form-field ci-sec-head"
  (ionFocus)="onPasswordFocus()"
  (ionBlur)="onPasswordBlur()"
  (keydown)="passwordKeydown($event, 'signUpForm')"
  [ngClass]="{'close-icon': validationVaribles.errorIconPassword, 'right-icon' : validationVaribles.successIconPassword }" 
  [(ngModel)]="userSignUpInfo.password"
>
  <span *ngIf="!platform.is('ios')" [hidden] = "shPassword" (click)="showPassword($event);" style="margin-right: 5px;height: 28px;">
    <img src="../../assets/images/show.svg" height="28" alt="显示密码">
  </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" alt="隐藏密码">
  </span>
</ion-input>
<div 
  [ngClass]="commonService.onResize() ? 'ci-box-shadow' : 'ci-box-shadow'" 
  *ngIf="passwordcomplexityHidden && (isPwdFocused || 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>

说明 #

修改后输入框获得焦点时就会自动触发提示框展示，失焦后如果密码为空自动隐藏，有输入内容时会持续展示校验结果，可根据业务需求调整onPasswordBlur中的隐藏逻辑。

内容的提问来源于stack exchange，提问作者shirish lakhe