隐藏页脚当键盘打开ionic4时

Question

引用此链接： Hide footer on keyboard open Ionic3

但随后的问题也一样

问题与上图中的相同。...我刚刚在页脚中添加了按钮...

.html文件

<ion-content>
<textarea placeholder="Please leave your review"></textarea>
<ion-content>

<ion-footer>
<ion-button (click)="submit()">Submit</ion-button>
</ion-footer>

因此，当单击文本区域时，键盘将打开，并且按钮似乎位于键盘上方。

我希望每当键盘打开时.....页脚会隐藏起来。

Answer 1

IONIC 4

步骤：1 您需要安装本机键盘插件才能使用键盘方法。您可以从here安装它。

步骤：2 ，然后将其导入到您的page.ts文件中

import { Keyboard } from '@ionic-native/keyboard/ngx';

步骤：3 ，然后将其作为

放在@Component下的提供程序中。

@Component({
providers: [Keyboard]
})

步骤：4 之后，在构造器部分的类中为键盘构造一个构造器。在您的app.component.ts文件中重复相同的步骤2-4

constructor(public keyboard:Keyboard) {
  }

步骤：5 然后像在班级中一样，使用变量将页面加载时默认隐藏键盘：

isKeyboardHide=true;

步骤：6 之后，您只需要在ionWillEnter方法中调用键盘的默认方法，然后在显示时将变量值设置为false即可显示键盘。

ionViewWillEnter() {
    this.keyboard.onKeyboardWillShow().subscribe(()=>{
      this.isKeyboardHide=false;
      // console.log('SHOWK');
    });

    this.keyboard.onKeyboardWillHide().subscribe(()=>{
      this.isKeyboardHide=true;
      // console.log('HIDEK');
    });
  }

步骤7：相应地隐藏并显示底部div或页脚。

//// FOR DIV BOTTOM DIV////
    <div class="" *ngIf="isKeyboardHide">
    </div>
//// OR FOR FOOTER ////
    <ion-content></ion-content>

    <ion-footer *ngIf="isKeyboardHide">
    </ion-footer>

Answer 2

最好的解决方案是使用“ inVisible”属性隐藏页脚或div。

例如：

<ion-footer *ngIf="!keyboard.isVisible">
 I am footer!
</ion-footer>