Ionic 4 iOS 键盘超过文本输入
Posted
技术标签:
【中文标题】Ionic 4 iOS 键盘超过文本输入【英文标题】:Ionic 4 iOS Keyboard over text input 【发布时间】:2019-01-06 01:08:07 【问题描述】:编辑:这是错误报告 - 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>
【问题讨论】:
您是否尝试将您的内容/网页放在滚动视图中? 当然没有,试试吧。 Ionic 4 中没有滚动视图,您的帖子指出了这一点:github.com/ionic-team/ionic/blob/master/angular/… 我试过了,但没用,谢谢! 【参考方案1】:我遇到了同样的问题,并设法通过在单击离子输入元素时调用此方法来解决:
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)向下滚动该距离。
这不是最干净的做事方法,但希望它仍然有帮助。
【讨论】:
感谢您的回答。我将添加一个基于电容键盘的侦听器 - capacitor.ionicframework.com/docs/apis/keyboard,当它出现并尝试您的代码时。我会在尝试时将其标记为已接受。我只是觉得这应该由 Ionic 自动完成,我错过了一些东西。 不,它被忽略了以上是关于Ionic 4 iOS 键盘超过文本输入的主要内容,如果未能解决你的问题,请参考以下文章