Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

input field hidden when soft keyboard appears in phonegap

Creating a mobile application using Phonegap 3.6.3 for Android and iOS. The problem is only for Android, as iOS acts as I would like it to.

When I click on an input text field, or a textarea, a soft keyboard appears. It covers these elements sometimes.

The pages are placed within a iScroll, right at the bottom, and another absolute-placed div, thus I cannot scroll to either of these once the screen pops up. I suspect I have to change the webview to be smaller when the keyboard comes up. However, after trying many things, it isn't working.

config.xml

    <preference name="permissions" value="none" />
    <preference name="phonegap-version" value="3.5.0" />
    <preference name="orientation" value="default" />
    <preference name="target-device" value="universal" />
    <preference name="fullscreen" value="false" />
    <preference name="webviewbounce" value="true" />
    <preference name="prerendered-icon" value="false" />
    <preference name="stay-in-webview" value="false" />
    <preference name="ios-statusbarstyle" value="black-opaque" />
    <preference name="detect-data-types" value="true" />
    <preference name="exit-on-suspend" value="false" />
    <preference name="show-splash-screen-spinner" value="false" />
    <preference name="auto-hide-splash-screen" value="false" />
    <preference name="disable-cursor" value="false" />
    <preference name="android-minSdkVersion" value="13" />
    <preference name="android-windowSoftInputMode" value="adjustResize|stateHidden" />
    <preference name="android-installLocation" value="auto" />
    <preference name="SplashScreen" value="splash" />

(have tried many different values for android-windowSoftInputMode, as per example below)

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

head of web page

    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

(yes, I've tried many other things too)

anything else you may perceive as relevant, please let me know. Unfortunately, I'm not at liberty to share too much of the code, but from my understanding that's all we need to worry about.

Thanks,

like image 762
Harry V Avatar asked Feb 18 '15 04:02

Harry V


4 Answers

I too had the same problem - the underlying problem it seems is you can't edit the androidManifest file with cordova Build. All you can do is edit the config.xml file which really only allows you to change a limited subset of settings. What I would like is to be able to change the windowSoftInputMode.

I did find a solution to my problem. which was the keyboard appearing over fields at the bottom of the screen which I think is the same problem you're having. I have used the cordova 2.9.0 and cordova 3.6.0

Solution 1: The solution I found was to change this setting in config.xml

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

This does with that setting set to "false" instead of "true" - the page now scrolls up to reveal the field you're editing when the keyboard opens. (to be more accurate, I believe the viewport changes rather than scroll up. Hope you are right on your viewport part)

Solution 2: Try remove or replace this line from config.xml

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

as

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

instead. This works for me now.

Solution 3: Try adding this style to your page

<style> <item name="android:windowTranslucentStatus">true</item></style>

EDIT:

If your are using jQuery you can try that.

$('input, textarea, button, a, select').off('touchstart mousedown').on('touchstart mousedown', function(e) {
    e.stopPropagation();
});
like image 53
rajmathan Avatar answered Nov 14 '22 20:11

rajmathan


My solution was using Ionic keyboard plugin and implementing this code:

HTML:

<div id="page" class="page-content">
    ...         
</div> 

CSS:

.page-content {    
height: 100%;
overflow: auto;}

Javascript:

  • when keyborad is open

        window.addEventListener('native.keyboardshow', function (e) {
        var deviceHeight = window.innerHeight;
        var keyboardHeight = e.keyboardHeight;
        var deviceHeightAdjusted = deviceHeight - keyboardHeight;//device height adjusted
        deviceHeightAdjusted = deviceHeightAdjusted < 0 ? (deviceHeightAdjusted * -1) : deviceHeightAdjusted;//only positive number
        document.getElementById('page').style.height = deviceHeightAdjusted + 'px';//set page height
        document.getElementById('page').setAttribute('keyBoardHeight', keyboardHeight);//save keyboard height
    });
    
  • when keyboard is closed

        window.addEventListener('native.keyboardhide', function (e) {
        setTimeout(function () {
            document.getElementById('page').style.height = 100 + '%';//device  100% height
        }, 100);
    

To provide a better user experience, add this code for all inputs

var inputs = document.querySelectorAll('input');//select all input
var n = inputs.length;
for (var i = 0; i < n; i++) {
    var input = inputs[i];
    input.addEventListener('focus', function (e) {//add event focus
        var inp = this; 
       //wait 0.6 seconds to scroll down to the input has focus
        setTimeout(function () {
            try {
                //if the keyboard is open
                if (cordova.plugins.Keyboard.isVisible) {
                    var padding = 15;
                    var targetPosition = parseInt($$(inp).offset().top + padding);
                    var keyboardHeight = parseInt(document.getElementById('page').getAttribute('keyBoardHeight'));//get keyboard height   

                    //if the input is hidden by the keyboard,scroll to the input 
                    if (targetPosition >= keyboardHeight) {
                        padding *=5;
                        document.getElementById('page').scrollTop = targetPosition - padding;
                    }
                }
            } catch (ex) {
                alert(ex.message);
            }
        }, 600);
    }, true);
like image 7
Yonatan Alexis Quintero Rodrig Avatar answered Nov 14 '22 18:11

Yonatan Alexis Quintero Rodrig


Remove this line from config.xml

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

And change the line in 'head of web page' to

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
like image 4
Mujeeb Avatar answered Nov 14 '22 19:11

Mujeeb


I have the most efficient solution to scroll into input automatically and make it visible. First you need to add the keyboard plugin(cordova plugin add com.ionic.keyboard) as mentioned by @Fedir. Then on your event handler of 'keyboardshow' event add the following code:

window.addEventListener('native.keyboardshow', function(e){ 
    setTimeout(function() {
        document.activeElement.scrollIntoViewIfNeeded();
    }, 100);
});

P.S: This is supported only on Android (Chrome) and Safari. :D

like image 1
Biswas Khayargoli Avatar answered Nov 14 '22 18:11

Biswas Khayargoli