Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why are the Ionic keyboard events not firing?

I'm trying to execute some code when the keyboard pops up and when it hides. I've placed it in the main MyAppComponent because I want the code to execute on any app page, but for some reason none of the keyboard events are working. What am I doing wrong?

...
import { Keyboard, Platform } from 'ionic-angular';

export class MyAppComponent {

    constructor(public platform: Platform, public keyboard: Keyboard) {
        this.platform.ready().then(() => {

            this.keyboard.didShow.subscribe(() => {
                // This is never executed...
                console.log('Keyboard is now open');
            });
        });
    }
}

I've tried using onKeyboardShow from ionic-native, but that did not execute its code either.

...
import { Platform } from 'ionic-angular';
import { Keyboard } from '@ionic-native/keyboard';

export class MyAppComponent {

    constructor(public platform: Platform, public keyboard: Keyboard) {
        this.platform.ready().then(() => {

            this.keyboard.onKeyboardShow().subscribe(() => {
                // This is never executed...
                console.log('Keyboard is now open');
            });
        });
    }
}

Ionic info dump:

cli packages: (/usr/lib/node_modules)
    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:
    cordova (Cordova CLI) : 8.0.0 

local packages:
    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 7.0.0
    Ionic Framework    : ionic-angular 3.9.2

System:
    Android SDK Tools : 26.1.1
    Node              : v9.11.1
    npm               : 5.8.0 
    OS                : Linux 4.13

The cordova-plugin-ionic-keyboard plugin (version 2.0.5) is installed, added to the appModule and present in config.xml

I'm testing the app on a Samsung Galaxy S6 with Android 7.0, it uses the default Samsung keyboard.

like image 364
Ionaru Avatar asked Sep 02 '25 06:09

Ionaru


2 Answers

You can use keyboard events like below;

  window.addEventListener('keyboardWillShow', (e) => {}); 
  window.addEventListener('keyboardWillHide', () => {});
  window.addEventListener('keyboardDidShow', (e) => {}); 
  window.addEventListener('keyboardDidHide', () => {});
like image 152
Berk Akkerman Avatar answered Sep 04 '25 20:09

Berk Akkerman


For Ionic 4 Keyboard Native Plugin try using addEventListener

window.addEventListener('keyboardWillShow', () => {
  console.log("Keyboard will Show");
});
window.addEventListener('keyboardDidShow', () => {
  console.log("Keyboard is Shown");
});
window.addEventListener('keyboardWillHide', () => {
  console.log("Keyboard will Hide");
});
window.addEventListener('keyboardDidHide', () => {
  console.log("Keyboard is Hidden");
});

Check complete tutorial code here

like image 42
Code Spy Avatar answered Sep 04 '25 22:09

Code Spy