Phonegap keyboard cover input field

Question

I am very new in Android apps development and i'm encountering issue with keyboard covering my input fields and I did a search and came to know that I need to add in

android:configChanges="screenSize|locale"

to the xml file. However I do not have the AndroidManifest.xml in my directory. All I have is config.xml which phonegap provided me.

Then I found this https://github.com/phonegap/build/issues/160 but I have no idea where to put this

android:windowSoftInputMode="value1|value2|valueN"

in my config.xml?

Any help is appreciated Thanks in adavance

Answer 1

Tried the accepted answer from @markj but it didn't work for me. What DID work was adding this to my config.xml:

<preference name="fullscreen" value="false" />

You do get the "status bar" on top of your app but thats ok with me... Hope that helps

Answer 2

Why not just use the PhoneGap Build website and upload a zip file? And forget about the manifest file that Amit is talking about. I think he's just making everything more confusing. You need to understand the difference between a local development build and a PhoneGap online build. If you just want to test your app, you don't need to have the local development environment. You can zip your www folder and upload it to the PhoneGap Build service. No command line stuff and no complicated setup. If you want to edit soft keyboard settings, you can edit your config.xml and insert the following:

<preference name="android-windowSoftInputMode" value="stateVisible|adjustResize" />

... or whatever options you want for the windowSoftInputMode.

The documentation is here:

https://build.phonegap.com/docs/config-xml#platform

http://developer.android.com/guide/topics/manifest/activity-element.html#wsoft

Good luck with it.

Answer 3

I solved this problem using css media queries.

@media (max-height: 600px) {
  .login-header i {
    display: none;
  }
}

The keyboard resizes the screen and the css above consequently hides 'login-header' when the screen size falls below an arbitrary value (e.g. 600px). This allows the hidden input to come into view.

Answer 4

With

<preference name="fullscreen" value="true" />

I needed to do the following two

a. Use https://github.com/madebycm/AndroidBug5497Workaround/blob/master/AndroidBug5497Workaround.java to ensure that cordova / phonegap can see a change in window height

b. Add the code below to js. This step is required depending upon how the html is written

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

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

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

function onKeyboardShow(e) {
  console.log('onKeyboardShow');
  setTimeout(function() {
    e.target.activeElement.scrollIntoViewIfNeeded()
  }, 500) //needed timeout to wait for viewport to resize
}

Answer 5

You have the manifest file in plaforms/android Go ahead and add your option

phonegap run android will add an android build of your phonegap project to the platforms directory, read on http://docs.phonegap.com/en/edge/guide_platforms_android_index.md.html#Android%20Platform%20Guide

Answer 6

Your AndroidMainFest location : Projectname -> Platform -> android -> AndroidMainFest.xml Your apk location : Project->bin->projectname.apk

set android:windowSoftInputMode="stateVisible|adjustResize" . . . >

Answer 7

Only one solution which worked for my full-screen app, it's to add to the Cordova application ionic-plugin-keyboard plugin

cordova plugin add com.ionic.keyboard

JS code :

// This event fires when the keyboard will hide
window.addEventListener('native.keyboardshow', keyboardShowHandler);

function keyboardShowHandler(e){
    $("body").addClass("keyboardOn");
}

// This event fires when the keyboard will show
window.addEventListener('native.keyboardhide', keyboardHideHandler);

function keyboardHideHandler(e){
    $("body").removeClass("keyboardOn");
}

After that You could adjust the view with CSS.

ref.: https://stackoverflow.com/a/25823491/634275