ionic-framework - 文本输入上的 Ionic 4 iOS 键盘

Question

编辑:这是错误报告 - https://github.com/ionic-team/ionic/issues/16797#issuecomment-457919043

我对原生 Ionic 的修复是在 4.0.0 发布时将其添加到 Capacitor Json 文件中:
"Keyboard": { "resize": "ionic" }
它在 Safari 中仍然存在相同的问题，并且我在 Capacitor GitHub 报告上发布的 Native iOS 中的 Capacitor 和选项卡存在问题，该报告刚刚关闭，应该在下一个版本中推送。

下面是页面的 HTML。当我点击底部的文本框时，键盘显示在文本框上，不允许它被看到。下图也是。

是不是因为新的iOS键盘的高度？我在图中的三个下方添加了一个新输入，并在模拟器上进行了尝试，因此它位于键盘顶部下方。还是一样的问题。

它不在页脚中，也不在 Ionic 3 中，所以我找不到另一个类似的问题。

<ion-content padding>
  <ion-card>
    <ion-card-header> New Password </ion-card-header>
    <ion-card-content> Change the password for {{ username }}. </ion-card-content>
  </ion-card>
  <form [formGroup]="changePasswordForm" (ngSubmit)="changePassword()">
    <ion-item no-padding margin>
      <ion-label position="stacked">Current Password</ion-label>
      <ion-input formControlName="oldPassword" type="password"></ion-input>
    </ion-item>
    <ion-item no-padding margin>
      <ion-label position="stacked">New Password</ion-label>
      <ion-input formControlName="password" type="password"></ion-input>
    </ion-item>
    <ion-item no-padding margin>
      <ion-label position="stacked">Confirm New Password</ion-label>
      <ion-input formControlName="confirmPassword" type="password"></ion-input>
    </ion-item>
    <ion-button type="submit" [disabled]="!changePasswordForm.valid" margin>Reset</ion-button>
  </form>
</ion-content>

Answer 1

我遇到了同样的问题，并设法通过在单击 ionic 输入元素时调用此方法来解决它:

public focusInput (event): void {

    let total = 0;
    let container = null;

    const _rec = (obj) => {

        total += obj.offsetTop;
        const par = obj.offsetParent;
        if (par && par.localName !== 'ion-content') {
            _rec(par);
        } else {
            container = par;
        }
    }
    _rec(event.target);
    container.scrollToPoint(0, total - 50, 400);
}

您可能想要调整 if 语句以适合您的代码。这种方法的想法是递归计算到最上面的可滚动元素的偏移量，在这种情况下是 ion-content ，然后使用 scrollToPoint() 向下滚动此距离方法 ( Docs )。

这不是最干净的做事方法，但希望它仍然有帮助。