键盘向上推屏幕 ionic 2

Question

我正在开发 ionic 2 应用程序。我的登录页面的 html 代码如下：

<ion-header>
  <ion-navbar color="royal">
    <ion-title> Inicio de sesión </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="fondo">

  <img src="assets/markerBoy.png" class="logo"/>

  <ion-card center>

    <ion-card-header>
      Credenciales
    </ion-card-header>

    <ion-card-content>
      <form>
        <ion-list>
          <ion-item>
            <ion-label floating> Usuario: </ion-label>
            <ion-input type="text" [(ngModel)]="user" name="user"> </ion-input>
          </ion-item>
          <ion-item>
            <ion-label floating> Contraseña: </ion-label>
            <ion-input type="password" [(ngModel)]="password" name="password"> </ion-input>
          </ion-item>
        </ion-list>
        <div padding>
          <button ion-button block (click)="iniciarSesionValidar()" color="royal"> Entrar </button>
        </div>
      </form>
    </ion-card-content>

  </ion-card>

</ion-content>

我不知道为什么，但是当我在 android 设备中运行应用程序时，起初屏幕看起来是正确的，但是当我点击用户名输入时，键盘出现并向上推屏幕。我将向您展示两张图片，一张是未选择任何内容时的图片，另一张是我单击用户名输入时的图片。

Normal Screen

Input clicked

有什么想法吗？

Answer 1

我在以下方面取得了成功：

1.) 将您不想滚动的内容扔到离子固定容器中：

<ion-content class="fondo">
    <div ion-fixed>
        <img src="assets/markerBoy.png" class="logo" />

        <ion-card center>

            <ion-card-header>
                Credenciales
            </ion-card-header>

            <ion-card-content>
                <form>
                    <ion-list>
                        <ion-item>
                            <ion-label floating> Usuario: </ion-label>
                            <ion-input type="text" [(ngModel)]="user" name="user"> </ion-input>
                        </ion-item>
                        <ion-item>
                            <ion-label floating> Contraseña: </ion-label>
                            <ion-input type="password" [(ngModel)]="password" name="password"> </ion-input>
                        </ion-item>
                    </ion-list>
                    <div padding>
                        <button ion-button block (click)="iniciarSesionValidar()" color="royal"> Entrar </button>
                    </div>
                </form>
            </ion-card-content>

        </ion-card>
    </div>
</ion-content>

2.) 我还阅读了从离子输入到标准输入元素的更改修复了一些键盘问题。

Answer 2

此解决方案适用于 android，这正是我要找的！只有一件事，只需更改 android 清单文件。

添加标签属性：

android:windowSoftInputMode="adjustPan"

里面<activity XXXattributeXX>

例如：

<activity android:windowSoftInputMode="adjustPan" />

Answer 3

我一直在处理这个问题，但使用的是 Ionic 4。我通过将位置的 CSS 属性设置为相对来修复它。

特别是对我来说，我有一个按钮，当我想要它时，它会一直移动到底部。根据您指定的位置，它将始终相对于那些位置。

fixed 和 absolute 属性与当前可用的属性有关 space 有点可笑。 https://www.w3schools.com/css/css_positioning.asp

键盘向上推屏幕 ionic 2

Keyboard pushes the screen up ionic 2

angular

keyboard

ionic2

screen