离子iOS键盘导致页脚抢购

Question

我有一个小聊天应用程序的对象。当输入集中在这个页脚上时，键盘触发，键盘完全显示后，页脚然后刺耳地snaps到键盘的顶部。

因此，在键盘完全上移之后，页脚不会被隐藏，但这不是一个好的体验，因为抓拍感觉很尴尬。

是否有办法使我的脚顺利移动与iOS键盘?

页面的html基本上是这样的:

<ion-page>
<ion-content>
</ion-content>
<ion-footer>
<my-input></my-input>
</ion-footer>
</ion-page>

Answer 1

离子输入处理这个键盘交互。也许你可以尝试使用离子输入&看看它是否能解决你的问题。

我已经实现了一个不完美的解决方案，我听键盘打开&关闭事件，然后相应地滚动ion内容。下面是指令的代码:

import { Directive, ElementRef, HostListener, Input, NgModule, OnDestroy, OnInit } from "@angular/core";
import { IonContent, Platform } from "@ionic/angular";
import { Subject } from "rxjs";
import { takeUntil } from "rxjs/operators";
const SCROLL_DELAY = 100;
const TOOLBAR_HEIGHT = 44; // todo Can be different for some pages
@Directive({
selector: "[appInputScrollIntoView]",
})
export class InputScrollIntoViewDirective implements OnInit, OnDestroy {
@Input("appInputScrollIntoView") content: IonContent;
keyboardHeight: number = 0;
target: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
focused = false;
closed$ = new Subject();
constructor(private elementRef: ElementRef, private platform: Platform) {}
@HostListener("focus", ["$event"])
onFocus(event: Event) {
this.focused = true;
}
@HostListener("focusout", ["$event"])
onFocusOut(event: Event) {
this.focused = false;
}
ngOnInit(): void {
this.target = this.elementRef.nativeElement as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
// Android handles keyboard scenario on HTML automatically
const matchPlatform = this.platform.is("ios") && this.platform.is("capacitor");
if (!matchPlatform) return;
this.platform.keyboardDidShow.pipe(takeUntil(this.closed$)).subscribe((ev) => {
const { keyboardHeight } = ev;
this.keyboardHeight = keyboardHeight;
this.adjustScrollPosition();
});
this.platform.keyboardDidHide.pipe(takeUntil(this.closed$)).subscribe(() => {
this.keyboardHeight = 0;
// maybe move back to original position here..
});
}
adjustScrollPosition() {
if (!this.focused) {
return;
}
setTimeout(() => {
this.scrollUpIfBehindKeyboard();
this.scrollDownIfBehindSafeArea();
}, 50);
}
scrollUpIfBehindKeyboard() {
const windowHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
const targetHeightFromBottom = windowHeight - this.target.getBoundingClientRect().bottom;
const requiredScroll = this.keyboardHeight - targetHeightFromBottom;
if (requiredScroll > 0) {
this.content.scrollToPoint(0, this.keyboardHeight, SCROLL_DELAY);
}
}
scrollDownIfBehindSafeArea() {
const safeArea = +getComputedStyle(document.documentElement)
.getPropertyValue("--ion-safe-area-top")
.replace("px", "");
const headerHeigth = TOOLBAR_HEIGHT;
const top = this.target.getBoundingClientRect().top;
const requiredScroll = safeArea + headerHeigth - top;
if (requiredScroll > 0) {
const y = this.target.offsetHeight - safeArea - headerHeigth;
this.content.scrollToPoint(0, y, SCROLL_DELAY);
}
}
ngOnDestroy(): void {
this.closed$.next();
this.closed$.complete();
}
}