iOS 8 jquery mobile 1.4.4 input keyboard not hiding footer menu anymore

Question

iOS 8 jquery mobile 1.4 cordova 3.6.3 any simulator, any physical real device

the problem is hiding the footer when the keyboard comes up for typing into form fields

previous solution was doing pretty good on iOS7 and now looks good when you tap on input element, however if you scroll the form, the footer comes up (fixed to the page) overlapping some other input fields.

Answer 1

Solution found!

iOS

have to edit the CDVNotification.m and CDVNotification.h in src folder of the org.apache.cordova.dialogs plugin as described here: add properties and methods to CDVnotification

Since it was not clear where to put the new lines this is the new code in CDVnotification.h

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#import <AudioToolbox/AudioServices.h>
#import <Cordova/CDVPlugin.h>

@interface CDVNotification : CDVPlugin <UIAlertViewDelegate>{}

@property (strong) NSString* keyboardShowcallbackId;
@property (strong) NSString* keyboardHidecallbackId;

- (void)alert:(CDVInvokedUrlCommand*)command;
- (void)confirm:(CDVInvokedUrlCommand*)command;
- (void)prompt:(CDVInvokedUrlCommand*)command;
- (void)beep:(CDVInvokedUrlCommand*)command;

- (void)keyboardShow:(CDVInvokedUrlCommand*)command;
- (void)keyboardHide:(CDVInvokedUrlCommand*)command;

@end

@interface CDVAlertView : UIAlertView {}
@property (nonatomic, copy) NSString* callbackId;

@end

then here is where i pasted the new lines in the CDVNotification.m

- (void)beep:(CDVInvokedUrlCommand*)command
{
    NSNumber* count = [command.arguments objectAtIndex:0 withDefault:[NSNumber numberWithInt:1]];
    playBeep([count intValue]);
}

//Keyboard notifications.

- (void)keyboardShow:(CDVInvokedUrlCommand*)command {

    [[NSNotificationCenter defaultCenter] removeObserver:self name:UIKeyboardWillShowNotification object:nil];

    self.keyboardShowcallbackId = command.callbackId;
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyBoardShowCallback:)
                                                 name:UIKeyboardWillShowNotification object:nil];
}
- (void)keyboardHide:(CDVInvokedUrlCommand*)command {
    [[NSNotificationCenter defaultCenter] removeObserver:self name:UIKeyboardWillHideNotification object:nil];

    self.keyboardHidecallbackId = command.callbackId;
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyBoardHideCallback:)
                                                 name:UIKeyboardWillHideNotification object:nil];
}

- (void)keyBoardHideCallback:(NSNotification*)notification {
    if (self.keyboardHidecallbackId) {
        CDVPluginResult* result = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK];
        [result setKeepCallbackAsBool:YES];

        [self.commandDelegate sendPluginResult:result callbackId:self.keyboardHidecallbackId];
    }
}

- (void)keyBoardShowCallback:(NSNotification*)notification  {
    if (self.keyboardShowcallbackId) {
        CDVPluginResult* result = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK];

        [result setKeepCallbackAsBool:YES];
        [self.commandDelegate sendPluginResult:result callbackId:self.keyboardShowcallbackId];
    }
}

@end

@implementation CDVAlertView

@synthesize callbackId;

@end

then find where you have the ondeviceready event in your cordova/phonegap app and paste the two cordova.exec lines.

onDeviceReady: function() {
    app.receivedEvent('deviceready');

    navigator.splashscreen.hide();

}, // fine onDeviceReady

receivedEvent: function(id) {

   console.log('Received Event: ' + id);

    if (isMobile.iOS()) {

        alert("this is iOS"); //

        cordova.exec(function(){  $("#footer").hide();  },function(){console.log("error");},"Notification","keyboardShow",[]);

        cordova.exec(function(){  $("#footer").show();  },function(){console.log("error");},"Notification","keyboardHide",[]);

    } else { 

        alert("this is android"); 

        document.addEventListener("showkeyboard", function(){ $("#footer").hide(); }, false);
        document.addEventListener("hidekeyboard", function(){ $("#footer").show(); }, false);


    }



}

Android

the previous solution, the js insertion code that detects the window resize when the virtual keyboard come up by css, is still working in Android

<script type="text/javascript">
document.write( '<style>#footer{visibility:hidden}@media(min-height:' + ($( window ).height() - 10) + 'px){#footer{visibility:visible}}</style>' );
</script> 

however I opted for the

document.addEventListener("showkeyboard", function(){ $("#footer").hide(); }, false);
document.addEventListener("hidekeyboard", function(){ $("#footer").show(); }, false);

if Android Device.

Hope it helps somebody like me struggling with this since one month :) !!