Android设备上的键盘导致密码输入字段消失（离子应用程序）答案

【问题标题】：Keyboard on android device causes password input field to disappear (ionic app)Android设备上的键盘导致密码输入字段消失（离子应用程序）
【发布时间】：2018-07-24 07:48:08
【问题描述】：

我有一个 ionic 应用程序，当我为 android 构建时，它们的键盘会导致一些内容问题。当我按他们的电话号码输入时，页面不会专注于电话号码，但它仍然可见，但是当我按下一步转到密码时，它会尝试专注于密码字段但是整个输入字段都有空白不可见。

  <form [formGroup]="loginForm">

    <ion-row>
      <ion-col text-center>
          <p class="phone-prompt">Login with your Phone Number</p>
          <ion-list>
              <ion-item>
                    <ion-select interface="popover" formControlName="options" >
                            <ion-option value="961">+961</ion-option>
                            <!--<ion-option value="380">+380</ion-option>-->
                    </ion-select>
                    <ion-input class="input-field phone-text" type="text" formControlName="phoneNum" placeholder="Your phone number"></ion-input>
              </ion-item>
              <ion-item>
                    <ion-input  class="input-field" type="password" formControlName="password" placeholder="Enter a password"></ion-input>
              </ion-item>
          </ion-list>
      </ion-col>
    </ion-row>

    <ion-row>
        <ion-col text-center>
            <button type="submit" ion-button class="login-button" outline color="primary" (click) = "loginAction()">
                Login
            </button>
        </ion-col>
    </ion-row>

    <ion-row>
        <ion-col text-center>
            <a class="forgot" (click) = "forgotPassAction()" >
              Forgot password?
            </a>
        </ion-col>
    </ion-row>
  </form>

还有这段代码的scss

page-login {

  .phone-prompt{
      margin-top: -20px;
      color: color($colors, spin-main);
  }

  .cyan{
      color: color($colors, spin-main);
      font-size: 22px;
  }

  .grey{
      color: #D3D3D3;
  }

  .login-button{
      border-radius: 4px;
      text-transform: none;
      margin-top: 8%;
      width: 130px;
      height: 30px;
      color: #6568b5;
  }

  .line{
      margin-top: 18px;
  }


  .line2{
      margin-top: 18px;
  }

  .phone-text {
      position: relative;
  }

}

我已经尝试通过更改来操纵 AndroidManifest 中的不同键盘设置

android:windowSoftInputMode="adjustResize"

进入

android:windowSoftInputMode="adjustPan"

但它并没有解决问题，它只是停止聚焦并将内容留在键盘下

离子版本：3.20.0

cordova 版本：8.0.0

【问题讨论】：

标签： android android-layout ionic3 android-softkeyboard

【解决方案1】：

在尝试了很多事情后，我发现当键盘可见时，滚动 div 中有空白填充，我通过将其添加到 css 解决了这个问题

ion-content > div {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

这解决了空白问题，现在应用看起来好多了

【讨论】：