【问题标题】：Hide Footer When keyboard is opened ionic4打开键盘时隐藏页脚
【发布时间】：2019-12-20 23:53:41
【问题描述】：

参考了这个链接： 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>

所以，当点击 textarea 时，键盘会打开，并且按钮会出现在键盘上方。

每当键盘打开时我都想要......页脚隐藏起来。

【问题讨论】：

标签： ionic4

【解决方案1】：

离子 4

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

步骤：2然后像这样将它导入你的page.ts文件中

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

Step:3然后把@Component下的providers作为

@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>

【讨论】：

@annaya，你找到解决方案了吗？

【解决方案2】：

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

例如：

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

【讨论】：

这对于 Ionic 5 仍然有效 ^ - 但您需要 import { Keyboard } from '@ionic-native/keyboard/ngx'; 和 providers: [Keyboard] 和 constructor(public keyboard:Keyboard) 根据 @Diksha235 的回答