Ionic 4键盘罩输入字段 [英] Ionic 4 keyboard covers input field
问题描述
我有一个Ionic 4应用,其中包含一个带有输入形式的表单.
当用户单击输入时,它会打开键盘,但是会隐藏内容,而不进行滚动.
有什么办法解决吗?
I have an Ionic 4 app that has a form with inputs in it.
When the user clicks on the input, it opens the keyboard, but it hides the content, without scrolling.
Is there any way around this?
这是我的代码:
<form #f="ngForm" (ngSubmit)="sendMail()">
<ion-item>
<ion-label position="floating">name
</ion-label>
<ion-input [(ngModel)]="senderName">
</ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">mail
</ion-label>
<ion-input [(ngModel)]="senderMail">
</ion-input>
</ion-item>
<ion-item class="borderedTextArea">
<ion-textarea [(ngModel)]="mailText" style="height:150px;"></ion-textarea>
</ion-item>
<ion-button type="submit" style="float:left">send</ion-button>
</form>
推荐答案
我目前正在将Ionic4与Cordova 9和所有最新软件包一起使用,但是在适合我的框架中找不到任何设置.最后,我提出了一种完全绕开框架的解决方法.它有一点动画,看起来还不错,所以我一直在使用它,直到框架正确解决为止.
I'm currently using Ionic4 with Cordova 9 and all the latest packages, and I could not find any settings within the framework that worked for me. In the end I made this workaround that completely circumvents the framework. It has a little animation and looks pretty OK, so I'm using it until the framework solves this properly.
global.scss
global.scss
ion-app {
/*animation of native keyboard show*/
transition: margin 300ms;
}
app.component.ts
app.component.ts
declare var $: any;
ngAfterViewInit() {
// This element never changes.
let ionapp = document.getElementsByTagName("ion-app")[0];
window.addEventListener('keyboardDidShow', async (event) => {
// Move ion-app up, to give room for keyboard
let kbHeight: number = event["keyboardHeight"];
let viewportHeight: number = $(window).height();
let inputFieldOffsetFromBottomViewPort: number = viewportHeight - $(':focus')[0].getBoundingClientRect().bottom;
let inputScrollPixels = kbHeight - inputFieldOffsetFromBottomViewPort;
// Set margin to give space for native keyboard.
ionapp.style["margin-bottom"] = kbHeight.toString() + "px";
// But this diminishes ion-content and may hide the input field...
if (inputScrollPixels > 0) {
// ...so, get the ionScroll element from ion-content and scroll correspondingly
// The current ion-content element is always the last. If there are tabs or other hidden ion-content elements, they will go above.
let ionScroll = await $("ion-content").last()[0].getScrollElement();
setTimeout(() => {
$(ionScroll).animate({
scrollTop: ionScroll.scrollTop + inputScrollPixels
}, 300);
}, 300); // Matches scroll animation from css.
}
});
window.addEventListener('keyboardDidHide', () => {
// Move ion-app down again
// Scroll not necessary.
ionapp.style["margin-bottom"] = "0px";
});
}
这篇关于Ionic 4键盘罩输入字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!