Ionic密码输入框带眼睛切换组件的浮动标签异常问题

使用Ionic官方的ion-input-password-toggle组件时，配置了label-placement="floating"的密码输入框出现异常：未输入任何内容时，浮动标签自动上浮到输入框顶部，破坏了预期的UI布局。

期望效果：初始状态下标签作为占位符显示在输入框内，仅当用户输入内容时，标签才上浮到输入框顶部。

使用的代码片段：

<ion-input 
  [fill]="INPUT_FILL_T.OUTLINE" 
  label-placement="floating" 
  type="password" 
  [label]="'PASSWORD' | translate" 
  name="password" 
  [placeholder]="'PASSWORD' | translate" 
  autocomplete="off" 
  [(ngModel)]="loginData.password" 
  required>
  <ion-input-password-toggle slot="end">
</ion-input>

解决方案 #

方案1：移除重复的placeholder属性 #

在浮动标签（floating label）模式下，Ionic会自动将label内容作为输入框的占位符使用，同时设置label和placeholder会干扰Ionic内部的状态判断逻辑，导致标签提前上浮。

修改后的代码：

<ion-input 
  [fill]="INPUT_FILL_T.OUTLINE" 
  label-placement="floating" 
  type="password" 
  [label]="'PASSWORD' | translate" 
  name="password" 
  autocomplete="off" 
  [(ngModel)]="loginData.password" 
  required>
  <ion-input-password-toggle slot="end"></ion-input-password-toggle>
</ion-input>

方案2：自定义CSS强制修正标签初始位置 #

如果移除placeholder后问题仍存在，可以通过自定义CSS覆盖Ionic的默认样式，强制未输入、未聚焦状态下的标签回到输入框内：

/* 针对未输入、未聚焦的密码输入框重置浮动标签样式 */
ion-input[type="password"]:not(.ng-dirty):not(:focus) .floating-label {
  transform: translateY(0) !important;
  font-size: 1rem !important;
  opacity: 0.6 !important;
}

方案3：升级Ionic框架版本 #

部分旧版本Ionic中，ion-input-password-toggle与浮动标签存在兼容性bug，建议升级到最新稳定版的Ionic框架，修复已知的组件适配问题。

内容的提问来源于stack exchange，提问作者ABDULLAH HASSAN