ionic-framework - 防止键盘在 Ionic 4 中调整 iOS/Android 上的 View 大小

Question

我有一张背景图片，我希望它全屏显示，底部有一个输入部分。当输入聚焦时，键盘出现并缩小图像以适合屏幕。我想要的是图像在不调整大小的情况下将整个 div 向上推。

我已经尝试了很多事情，但我目前的尝试如下:

.background{
url('assets/background.png') center center fixed;
height: 100%;
width: 100%;
}
.input-area{
position: absolute;
left: 10px;
bottom: 10px;
right: 10px;
}

<div class="background">
  <div class="input-area">
    //textboxes
  </div>
</div>

这看起来应该很容易完成，但得不到想要的结果。任何输入将不胜感激，谢谢。

ionic cli 4.12.0
@ionic/angular 4.4.0
@ionic-native 5.5.1
node v10.15.2
npm 6.4.1
cordova 8.1.2 (cordova-lib@8.1.1)

Answer 1

这是我设法做到的:

1. 我在 html 文件中为我的 ion-content 和 ion-toolbar 添加了一个 id，以便在我的 typescript 文件中引用它们

...
<ion-content #content >
...
<ion-toolbar #toolbar color="light">
  <ion-input #input >...
...

1. 在我的 typescript 中，我用 ViewChild 引用了它们，并像这样在构造函数中添加了功能

...
@ViewChild('content', {read: ElementRef}) contentRef: ElementRef;
@ViewChild('toolbar', {read: ElementRef}) toolbarRef: ElementRef;
...
  private startkeyboardAnimationTimestamp = 0;
  private endkeyboardAnimationTimestamp = 0.3;
  private keyboardAnimationDuration = 0.3;
...
constructor(private renderer: Renderer2) {

    if (this.platform.is('capacitor')) {

      window.addEventListener('keyboardWillShow', (e) => {
        this.startkeyboardAnimationTimestamp = Date.now();
        this.keyboardHeight = (<any>e).keyboardHeight;
        this.renderer.setStyle(this.contentRef.nativeElement, 'transform', `translate3d(0, ${-this.keyboardHeight}px, 0)`);
        this.renderer.setStyle(this.contentRef.nativeElement, 'transition', `${this.keyboardAnimationDuration}s ease-in-out`); 
        this.renderer.setStyle(this.toolbarRef.nativeElement, 'transform', `translate3d(0, ${-this.keyboardHeight}px, 0)`);
        this.renderer.setStyle(this.toolbarRef.nativeElement, 'transition', `${this.keyboardAnimationDuration}s ease-in-out`);

     window.addEventListener('keyboardDidShow', (e) => {
        this.endkeyboardAnimationTimestamp = Date.now();
      });

    window.addEventListener('keyboardWillHide', () => {
           this.renderer.setStyle(this.contentRef.nativeElement, 'transform', 
    `translate3d(0, 0px, 0)`);
           this.renderer.setStyle(this.toolbarRef.nativeElement, 'transform', 
    `translate3d(0, 0px, 0)`);
          });
...

** 至于 keyboardAnimationDuration，我将它默认为 0.3s，并在第一次显示和隐藏后更新它。