我有一个Ionic 4应用程序,其中包含一个带有输入的表单。 当用户点击输入时,它会打开键盘,但它会隐藏内容,而不会滚动。 有没有办法解决?
这是我的代码:
<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>
我目前正在使用带有Cordova 9的Ionic4和所有最新的软件包,我在框架内找不到适合我的任何设置。最后,我做了这个完全绕过框架的解决方法。它有一个小动画,看起来很不错,所以我一直在使用它,直到框架正确解决这个问题。
global.scss
ion-app {
/*animation of native keyboard show*/
transition: margin 300ms;
}
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 bug:
...
<ion-texarea (ionFocus)="fixTextareaBug()">
...
在你的.ts
@ViewChild(IonTextarea)
public ionTextArea: IonTextarea;
private focusFix = false;
...
...
public fixTextareaBug() {
setTimeout(() => {
if (this.focusFix) {
this.focusFix = false;
return;
}
(this.ionTextArea as any).el.lastElementChild.blur();
this.focusFix = true;
(this.ionTextArea as any).el.lastElementChild.focus();
}, TEXTAREA_TIMEOUT);
}
我希望它能解决你的问题
我也有这个问题,但只在android中,我做的是创建一个获得聚焦元素和键盘高度的脚本,并使用jQuery我添加了marginTop,当键盘显示时,将主体移动到键盘上方,这是我的代码:
constructor(
private platform: Platform,
private keyboard: Keyboard
) {
if(this.platform.is('android')){
this.keyboard.onKeyboardShow().subscribe((e) => {
const offset = $(document.activeElement).offset().top;
let height = (offset - e.keyboardHeight)*-1;
height = height > 0 ? 0 : height;
$('body').animate({ 'marginTop': height + 'px' }, 100);
});
this.keyboard.onKeyboardHide().subscribe(e => {
$('body').animate({ 'marginTop': 0 + 'px' }, 100);
});
}
}
需要的库:
npm install jquery
npm install @types/jquery
ionic cordova plugin add cordova-plugin-ionic-keyboard
npm install @ionic-native/keyboard
进口
import { Platform } from '@ionic/angular';
import * as $ from "jquery";
import { Keyboard } from '@ionic-native/keyboard/ngx';
不是优雅的解决方案,但它的工作原理