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

Gourami

if it is in fullscreen events does not work, need to renove fullscreen – Bourque

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

Pasha

My app is in fullscreen mode (because of this other problem) and those two events are not called in this case. So your solution doesn't work. I can barely detect those event thanks to onblur and onfocus events : $('"input[type=text]").bind("focus", function(e) { ... }); But when the keyboard is hide thanks to the back button, the function isn't called evenif I override the backbutton event. – Gourami

@Gourami I included instructions on how to download the plugin. – Pasha

Thanks for your reply. This plugin allow us to show/hide manually the keyboard and check if it's showed or hide but we can't detect the event when it's show or hide. I'm looking for a way to detect those two events. – Gourami

@Gourami I updated my answer to use the Ionic keyboard plugin – Pasha

@Andreas Yes I felt it was necessary to update the answer with this plugin available. Thank you for adding it. – Pasha

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)

Words

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.

Bourque

Unfortunately, the fullscreen option is the only solution I found in order to correct another problem. If I remove it, my application will not work. – Gourami

If it is in full screen then keyboadrd evnts never work perfectly as per phonegap doc – Bourque

Please update your answer. @Ross' answer is correct and using Ionic plugin will trigger these events. – Salo

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

Autotype