在某个输入已获得焦点后，如何防止点击另一个输入时离子 4 电容键盘关闭

Question

我要链接 APK。单击“登录”按钮即可解决问题:) https://drive.google.com/file/d/1BKol_X_FhISZw6bnuwV6PN7fopAa0xlt/view?usp=drive_link

基本上，如果您选择“输入电子邮件”输入，键盘就会打开并向上推送页面内容。这很好，但如果您随后单击“输入密码”输入，则键盘将在单击输入之前关闭。单击“登录”按钮时，它会执行相同的操作。我尝试过 (mousedown)="$event.preventDefault()" 但没有运气。

  <div  class="sign-in-inputs-container">
    <!--Email-->
    <mat-form-field class="welcome-input welcome-input-text">
      <input matInput placeholder="Enter Email" [(ngModel)]="email">
    </mat-form-field>

    <!--Password-->
    <ng-container *ngIf="currentWelcomeState != WelcomeState.FORGOTPASSWORD">
      <mat-form-field class="welcome-input welcome-input-text">
        <input type="password" matInput placeholder="Enter Password" [(ngModel)]="password">
      </mat-form-field>
    </ng-container>
    

    <!--Login-->
    <button *ngIf="currentWelcomeState == WelcomeState.SIGNIN" (click)="signIn()" class="login-button welcome-input welcome-input-button" mat-raised-button color="primary">Login</button>

    <!--Forgot Password-->
    <button *ngIf="currentWelcomeState == WelcomeState.FORGOTPASSWORD" (click)="forgotPassword()" class="login-button welcome-input welcome-input-button" mat-raised-button color="primary">Forgot Password</button>
  </div>
</div>

Answer 1

将自定义字段替换为 Ionic 字段，键盘的行为将更加一致。

<div class="sign-in-inputs-container">
  <ion-item>
    <ion-label position="floating">Email</ion-label>
    <ion-input type="email" [(ngModel)]="email"></ion-input>
  </ion-item>

  <ng-container *ngIf="currentWelcomeState !== WelcomeState.FORGOTPASSWORD">
    <ion-item>
      <ion-label position="floating">Password</ion-label>
      <ion-input type="password" [(ngModel)]="password"></ion-input>
    </ion-item>
  </ng-container>

  <ion-button *ngIf="currentWelcomeState === WelcomeState.SIGNIN" 
    (click)="signIn()" expand="block">
    Login
  </ion-button>

  <ion-button *ngIf="currentWelcomeState === WelcomeState.FORGOTPASSWORD" 
    (click)="forgotPassword()" expand="block">
    Forgot Password
  </ion-button>
</div>