Ionic framework Ionic 4 iOS键盘支持文本输入

编辑：这是错误报告-

<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>

我对native Ionic的修复是在4.0.0发布时将其添加到Json文件中：

<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>

“键盘”：{
“调整大小”：“离子型”
}

<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>

Safari中仍然存在同样的问题，我在Capactor GitHub报告中发布的原生iOS中的电容器和选项卡也存在问题，该报告刚刚关闭，应该在下一版本中推出

<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>

---

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

<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>

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

<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>

它不在页脚，也不在爱奥尼亚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>

<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>

<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>

新密码
更改{{username}的密码。
当前密码
新密码
确认新密码
重置

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

<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>

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（）

方法（）向下滚动此距离

<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>

---

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

你尝试过将内容/网页放入滚动视图中吗？当然没有，我会尝试一下。爱奥尼亚4中没有滚动视图，你的帖子告诉我：我尝试过，但没有成功，谢谢！谢谢你的回答。我将添加一个基于电容键盘的侦听器-当它出现时，并尝试您的代码。当我尝试时，我会把它标为接受。我只是觉得这应该由爱奥尼亚自动完成，我遗漏了一些东西。不，它被忽略了

<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>