Hide Footer When keyboard is opened ionic4

Question

referred to this link: Hide footer on keyboard open Ionic3

But then also issue is the same

Issue is same as in above image.... I have just added button in footer...

.html file

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

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

So, When click on textarea, keyboard opens and the buttons appears to be above the keyboard.

I want whenever the keyboard opens.....the footer get hide.

Answer 1

IONIC 4

Step:1 You need to install native keyboard plugin for using keyboard methods. You can install it from here.

Step:2 Then import it in your page.ts file like this

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

Step:3 Then put it in the providers under @Component as

@Component({
providers: [Keyboard]
})

Step:4 After that , make a constructor for keyboard in your class in constructor section. Repeat same step 2-4 in your app.component.ts file

constructor(public keyboard:Keyboard) {
  }

Step:5 Then take a variable to default hide keyboard on load of the page as in your class:

isKeyboardHide=true;

Step:6 After that, all you need to call default methods of keyboard in ionWillEnter method and on show put the variable value as false for showing keyboard.

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

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

Step:7 Hide and show bottom div or footer accordingly.

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

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

Answer 2

The best solution is use 'inVisible' property to hide footer or div.

for example:

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