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).

Solution 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');
}

Solution 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)

Solution 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.

Solution 4

I couldn't get any of the answers here to work so I thought I'd share my solution.

My scenario is I use a Bootstrap button group to navigate between screens and certain screens need to have <input/> fields with default focus. Well, when I put focus on a field it would bring up the soft keyboard. I tried to hide the keyboard when the new <input/> was displayed but it seems the Android keyboard is being shown immediately after the page has finished rendering (which is after my call to Keyboard.hide(); is run)

My work around is to use a setTimeout, as shown below.

$("#my_input").focus();
window.setTimeout(function(){
  Keyboard.hide();
}, 1);

Why does this work? I believe because it places my callback far enough back in the callback queue.

NOTE: You might still see the soft keyboard quickly show and then hide. Haven't found a way around that.

View more solutions