android - 在 Ionic App 中单击外部弹出窗口时打开键盘

Question

当我打开“弹出框”时，它会显示一个输入窗口。打开后，单击屏幕上的任意位置会导致键盘打开：

当我在弹出框元素外部单击时，键盘打开。

PopOver 组件 Html

<ion-content>
  <ion-icon class="close" name="close-sharp" (click)="closePopUp()"></ion-icon>
  <p>{{title}}</p>
  <!-- <ion-icon name="information-circle-outline" (click)="LoadInfoPopUp()"></ion-icon> -->

  <div class="wrap-input" *ngIf="inputs?.weight">
    <input class="input" [(ngModel)]="inputValues.weight" type="number" name="weight" placeholder="Enter Body Weight (Kg)">
  </div>

  <div class="wrap-input" *ngIf="inputs?.height">
    <input class="input" [(ngModel)]="inputValues.height" type="number" name="height" placeholder="Enter Height (cm)">
  </div>

  <div class="wrap-input" *ngIf="inputs?.age">
    <input class="input" [(ngModel)]="inputValues.age" type="number" name="age" placeholder="Enter Age">
  </div>

  <div class="radio-button" *ngIf="inputs?.gender">
    <label class="custom-radio-btn">
      <input type="radio" name="gender" [(ngModel)]="inputValues.gender" value="Male">
      <span class="checkmark"></span>
    </label>
    <label> Male </label>
    <label class="custom-radio-btn" *ngIf="inputs?.gender">
      <input type="radio" name="gender" [(ngModel)]="inputValues.gender" value="Female">
      <span class="checkmark"></span>
    </label>
    <label> Female </label>
  </div>

  <div class="wrap-input" *ngIf="inputs?.fatPercent">
    <input class="input" type="number" name="fatpercent" [(ngModel)]="inputValues.fatPercent" placeholder="Enter Estimated Fat % ">
  </div>

  <div class="wrap-input" *ngIf="inputs?.neck">
    <input class="input" type="number" name="neck" [(ngModel)]="inputValues.neck" placeholder="Enter Neck (cm) ">
  </div>

  <div class="wrap-input" *ngIf="inputs?.waist">
    <input class="input" type="number" name="waist" [(ngModel)]="inputValues.waist" placeholder="Enter Waist (cm)">
  </div>

  <div class="wrap-input" *ngIf="inputs?.hip">
    <input class="input" type="number" name="hip" [(ngModel)]="inputValues.hip" placeholder="Enter hip (cm)">
  </div>

  <div class="wrap-input" *ngIf="inputs?.shoulder">
    <input class="input" type="number" name="shoulder" [(ngModel)]="inputValues.shoulder" placeholder="Enter Shoulder (inches)">
  </div>

  <div class="drop-down" *ngIf="inputs?.workoutDays">
    <label>Select Workout Days/Week</label>
    <select class="box" ngDefaultControl [(ngModel)]="inputValues.workoutDays" name="workoutDays">
      <option *ngFor="let item of workdayList" [ngValue]="item.value">{{item.name}}</option>
    </select>
  </div>

  <div class="drop-down" *ngIf="inputs?.activity">
    <label>Select How Active You Are</label>
    <select class="box" ngDefaultControl [(ngModel)]="inputValues.activity" name="activity">
      <option *ngFor="let item of activityList" [ngValue]="item.value">{{item.name}}</option>
    </select>
  </div>

  <div class="drop-down" *ngIf="inputs?.weightLossRate">
    <label>Rate Of Weight Loss %</label>
    <SELECT class="box" ngDefaultControl [(ngModel)]="inputValues.weightLossRate" name="weightLossRate">  
      <option *ngFor="let value of weightMeter" [ngValue]="value">{{value}}</option>
    </SELECT>
  </div>

  <div class="drop-down" *ngIf="inputs?.weightGainRate">
    <label>Rate Of Weight Gain %</label>
    <SELECT class="box" ngDefaultControl [(ngModel)]="inputValues.weightGainRate" name="weightGainRate">  
      <option *ngFor="let value of weightMeter" [ngValue]="value">{{value}}</option>
    </SELECT>
    
  </div>

  <div class="wrap-input" *ngIf="inputs?.steps">
    <input class="input" type="number" name="step" [(ngModel)]="inputValues.steps" placeholder="Enter Steps Walked">
  </div>

  <div class="radio-button" *ngIf="inputs?.body">
    <label class="custom-radio-btn">
      <input type="radio" name="body" value="Upper Body" [(ngModel)]="inputValues.body">
      <span class="checkmark"></span>
    </label>
    <label> Upper Body </label>
    <label class="custom-radio-btn" *ngIf="inputs?.gender">
      <input type="radio" name="body" value="Lower Body" [(ngModel)]="inputValues.body">
      <span class="checkmark"></span>
    </label>
    <label> Lower Body </label>
  </div>

  <div class="wrap-input" *ngIf="inputs?.weightLifted">
    <input class="input" type="number" name="weightLifted" [(ngModel)]="inputValues.weightLifted" placeholder="Weight Lifted For 2-5">
  </div>

  <div class="wrap-input" *ngIf="inputs?.duration">
    <input class="input" type="number" name="duration" [(ngModel)]="inputValues.duration" placeholder="Enter Duration (min)">
  </div>

  <div class="radio-button" *ngIf="inputs?.intensity">

    <label class="custom-radio-btn">
      <input type="radio" [(ngModel)]="inputValues.intensity" value="Low" name="intensity">
      <span class="checkmark"></span>
    </label>
    <label> Low </label>
    <label class="custom-radio-btn" >
      <input type="radio" [(ngModel)]="inputValues.intensity" value="Moderate" name="intensity">
      <span class="checkmark"></span>
    </label>
    <label> Moderate </label>
    <label class="custom-radio-btn" >
      <input type="radio" [(ngModel)]="inputValues.intensity" value="High" name="intensity">
      <span class="checkmark"></span>
    </label>
    <label> High </label>
  </div>  
  
  <ion-button id="Calculate" (click)="calculateResult()">Calculate</ion-button>
  
  <hr>
  <p *ngIf="result">{{result}}</p>

</ion-content>

调用方法：

openToolWindow(tool) {
let clickedTool = this.toolDictionary[tool]
this.popCrtl.create(
  { component: InputWindowComponent,
    showBackdrop:false,
    componentProps: {'toolName':clickedTool.toolName, 'inputs':clickedTool.inputs},
    cssClass: 'custom-popover',
    backdropDismiss: false     
  }
  ).then((element) => {
    element.present();
  })
 }

与之关联的 CSS：

.custom-popover .popover-content {
width: 80%;
}

有人可以建议一种方法吗？我已经尝试过：

if (document.activeElement === document.body) {
   this.keyboard.Hide()
}

但是永远不会调用事件侦听器方法。任何人都可以提出任何解决方案吗？

标签： androidiosionic-frameworkkeyboard