Question

我有一个离子应用程序，当我为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

Answer 1

尝试了许多事情之后，我发现当键盘可见时，滚动div中会有空格填充，我将此问题添加到了CSS中来解决了这个问题

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

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

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

1 个答案: