键盘将屏幕向上推 离子 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设备中运行该应用程序时，起初屏幕看起来是正确的，但是当我单击用户名输入时，键盘出现并向上推屏幕。我将向您展示两张图片，一张是未选择任何内容时，另一张是我单击用户名输入时。

普通屏幕

点击的输入

知道吗？

Answer 1

这个解决方案适用于安卓，这就是我一直在寻找的！只有一件事，只需在Android清单文件中进行更改即可。

添加标签属性：

android:windowSoftInputMode="adjustPan"

内部<activity XXXattributeXX>

例如：

<activity android:windowSoftInputMode="adjustPan" />

Answer 2

我成功地

做到了以下几点：

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 3

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

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

有趣的是

，属性固定和绝对与当前可用空间有关。https://www.w3schools.com/css/css_positioning.asp