Keyboard Open/Close State Detection

Ionic Framework ionic-v3
1

Hi Everyone,

I’m looking for a simple and not overcomplicated solution to detect whether keyboard on mobile device has been opened or not (stack: Ionic2, Angular2).

Even HTML/BODY class should be enough.
Thanks!

2

Did you look at the events exposed by the native Keyboard plugin?

3

This works well on Cordova build.
Is something similar possible for pwa/mobile environment?

4

I just found this in documentation: Keyboard

All we have to do is:

import { Keyboard } from 'ionic-angular';

export class MyClass {
  constructor( private keyboard: Keyboard
             ) {
  }

And ind HTML:

<ion-footer [hidden]="keyboard.isOpen()">
  ... footer content here...
</ion-footer>

This also works in browsers.

.isOpen() will also return true when keyboard is hidden if focus is on input field, but I can live with that.

Cheers.

8 Likes
6

You sir, are a genious.