Cordova 3.4 - Detect keyboard event

Question

I'm trying to detect the showkeyboard and hidekeyboard events in my application running thanks to Cordova 3.4.0 and JQuery Mobile 1.4.2. In the configuration file, the fullscreen attribute is set to true (I need it).

The fact is, in LogCat, I can't read (apprently it's due to the fullscreen mode) :

SoftKeyboardDetect : Ignore this event

Is there any solution to detect these two events? I tried an alternative way by detecting blur and focus events on my input field. It works, but when the keyboard is closed by the back button, those events are not called.

So, I tried to detect the backbutton event, but it doesn't work (http://simonmacdonald.blogspot.fr/2011/05/overriding-back-button-in-phonegap.html).

Answer 1

I think this will work for your needs -

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady () {
    document.addEventListener('hidekeyboard', onKeyboardHide, false);
    document.addEventListener('showkeyboard', onKeyboardShow, false);
}

function onKeyboardHide() {
    console.log('onKeyboardHide');
}

function onKeyboardShow() {
    console.log('onKeyboardShow');
}

// edit

Since you cannot hook into those events you need a plugin. This one here will do the trick.

To install the plugin perform cordova plugin add com.ionic.keyboard

// This event fires when the keyboard will be shown

window.addEventListener('native.keyboardshow', keyboardShowHandler);

function keyboardShowHandler(e){
    console.log('Keyboard height is: ' + e.keyboardHeight);
}

// This event fires when the keyboard will hide

window.addEventListener('native.keyboardhide', keyboardHideHandler);

function keyboardHideHandler(e){
    console.log('Goodnight, sweet prince');
}

Answer 2

The Ionic keyboard plugin gives you native.showkeyboard and native.hidekeyboard events which can be used this way: After adding it to you project:

cordova plugin add https://github.com/driftyco/ionic-plugins-keyboard.git

use it this way:

window.addEventListener('native.hidekeyboard', keyboardHideHandler);
window.addEventListener('native.showkeyboard', keyboardShowHandler);
function keyboardHideHandler(e){
    alert('Goodnight, sweet prince');
}
function keyboardShowHandler(e){
    alert('Keyboard height is: ' + e.keyboardHeight);
}

Extra description and features can be found on github This worked for me in Cordova 3.4 with full-screen mode configured in the config.xml file . The fact that it has 15036 downloads says a lot but as I said I have also used it my self with full-screen on the exact Cordova version.(and it was actually the only thing that worked for me plus it supports ios as well)

Answer 3

Hi if you need showkeyboard and hidekeyboard events in phonegap based application you need to remove fullscreen option , then only these events will trigger.