Virtual keyboard hides text input (tested on Iphone and Android)

[pluggy]

When looking at http://jquerymobile.com/test/#docs/forms/forms-text.html and tapping on the text input at the bottom of the page, a virtual keyboard appears (as expected). The problem is that the virtual keyboard overlaps the focused text input. So while I type, I can't see what is being typed. I also cannot scroll down further to the bottom to see the text box, because the page always snaps back up.

I have reproduced this issue on both an Android 2.1 and Iphone (IOS 4.1) device, both with native browsers.

[cm71td]

I'm having this problem as well (in my application). Any word on a fix?

[StevenBlack]

It's been awhile since this bug's been filed, hasn't it?

I'll raise this in discussions. Stay tuned.

[toddparker]

I bumped this up to critical and assigned it to Scott to see is he has any ideas.

[deelo55]

hey guys...any word on a fix for this?

[toddparker]

We haven't had a chance to look at this yet, but it's on our radar!

[chaelli]

Same problem here... Any updates?

[tomkanjam]

The Android keyboard works perfectly on the fields in the link below but now on my site.

http://jquerymobile.com/demos/1.0b3/docs/forms/texts/index.html

Very frustrating. My site's text fields work on iOS but not Android. I have tried copy/pasting the html from the link above to my site and it doesn't work but it works on the jquerymobile site. Argh!

Any ideas?

[chaelli]

Since I'm using a nightly build of about 2weeks ago it works... Maybe it's
the same for you?

[toddparker]

If your page markup and styles are the same as the docs, I'm not surprised that things look different. I'm guessing the overflow rules we have on the document are causing this, bit I'm not sure. If you ensure there is a bit more content below the input (or space), does the problem go away?

[toddparker]

Hi all - Is this still an issue with 1.0.1?
Also please test on master (1.1-pre): www.jquerymobile.com/test

[toddparker]

I haven't run into this in testing for months and there hasn't been a reply from anyone so closing as fixed.

[wturnerharris]

hmm. Using 1.1.0 final and I have this issue, on both Android and iOS. Clicking a textarea will fly in the keyboard and flyout the header, which should remain onscreen.

[toddparker]

@wturnerharris - See my response in #1087

[neerajsharmatbs]

Hi, I am using JQM 1.2 with JQuery 1.8.1 and i am facing the issue "Virtual keyboard hides text input on Android". It seems to appear on every page containing form elements or when a simple dialog box with input is opened. I have tested this on ASUS transformer Eee pad and Samsung Galaxy tab as well. On IPad2 it is working absolutely fine. Whenever you click on input field on IPad2 virtual keyboards appears on screen and scrolls up the page so that the input is visible to the user.

[amitsudharshan]

I am seeing this problem as well with android on 1.3.0

[jaspermdegroot]

@neerajsharmatbs @chipmunc56

Can you post a test page and tell us on what Android version the problem occurs?
See the contributing guidelines for JS Bin template.

[fergfamster]

iOS 6 has this issue. Has this been re-opened somewhere else using JQM 1.3?

[gerardohuck]

I'm using JQM 1.3.2., jquery-1.10.2, Phonegap, and Android 4.3

I'm facing this issue. Can we re-open this here or elsewhere?

[gkrilov]

I am almost facing this issue on Android 4.1.2 and 2.2

[ZainShaikh]

I m also facing same issue, any fix/workaround recommended?

[jaspermdegroot]

@gerardohuck @gkrilov @ZainShaikh

Can you open one new ticket for this including a simple test page that uses latest code. Please include steps to reproduce, info about platform/device you tested on, if it is only an issue with PhoneGap, etc.. See our contributing guide for instructions. Thanks!

[code2be]

Confirming same issue, fixing is highly needed.

[ghost]

Any update on this, also having the same issue in 1.4.2

[indranil-indus]

Urgenly need a solution of this.Having same problem

[gemmawood]

This is an issue with 1.4.2 and Android 4.4....Any updates? Thanks so much.

[jaspermdegroot]

@rajibint @indranil-indus @gemmawood

See my previous comment (#1079 (comment)). Can one of you provide a simple test page that illustrates the issue? Thanks!

[ghost]

This is happening with Phonegap full screen android application only!! tested on android browser it is fine

[ghost]

This is an issue with kitkat, http://stackoverflow.com/questions/19897422/keyboard-hiding-edittext-when-androidwindowtranslucentstatus-true

Fixed by disabling the full screen mode of the app.

[kevinstumpf]

Still reproducible with jquery Mobile 1.4.3.

Steps to reproduce:

1. Use phonegap 3.5.0-0.21.14 (latest as of today)
2. Use jQuery Mobile version 1.4.3
3. Use jQuery version 2.1.1
4. Create new project: "phonegap create autoScrollTest"
5. Change config.xml preference "fullscreen" to "false"
6. Add a bunch of input fields to index.html
7. Run "phonegap run android" and deploy it to a KitKat Android (also tested and verified with iOS 7)
8. Tap into one of the inputs at the bottom of the page

Observed behavior:

1. As soon as one taps into one of the inputs at the bottom of the page, the page scrolls down - but not enough. The input is still covered by the keyboard
2. As soon as one starts typing, the scroll position/viewport is adjusted and the input is visible perfectly fine

Notes:
This behavior occurs only if jQuery Mobile is included. Otherwise, the input is visible perfectly fine as soon as it is focused.

Sample index.html can be found here: https:/KevinMSt/jqueryMobileIssue1079/blob/master/www/index.html

[leoabacade]

just wanna report the same bug I am facing now

environment:
phonegap 3.5.0
jQuery Mobile version 1.4.3
jQuery version 2.1.1

test in IOS 6, no bugs, it fine, the screen reduce its size automatically once the keyboard shows up.
test in IOS 7, its BUGGY

IOS 7 behavior:
The input is covered by the keyboard once tap the input field
when blur the input field, the keyboard disappear and screen size do not auto fill the full screen.

[srini07ec53]

I am also facing the same issue in android devices for both phonegap applications and android default thin browsers. If the screen contains any input field at the bottom of the screen, then only this issue is occuring.

I tried to create empty dom element after last input field and dynamically updating height of the dom when last input field is getting focus. But it is giving flicker behaviour while changing the height of the dom.

Is anyone having proper solution to fix this issue.

[Ruffio]

Would it possible for any of you to make a test page demonstrating the
issue?

[srini07ec53]

As mentioned in the above comment, I tried to include empty dom element with height as 0 at the end of last input field in the page. On focus event of all input fields, making the height of empty dom element as pageheight/2.

Flickering issue is resolved by doing the dom height change with jquery .animate method. On blur event height needs to be reset to 0 again.

With this approach, we can able to move the input to visible area if virtual keyboard displays.

[Ruffio]

@srini07ec53 I'm not part of the jQuery Mobile team, but I help to test, whenever I can and I have been around for some time to know how they want it. Remember, that if you want somebody to help you, it is a lot easier if you make it easy for them, in this case by making a test page demonstrating the issue.

Have you taken a look at the contributing guide for instructions? https:/jquery/jquery-mobile/blob/master/CONTRIBUTING.md

[arschmitz]

We really need someone to post a simple test page reproducing this before we can properly look into it. Please see the link posted by @Ruffio above and create a simple jsbin test page reproducing the issue and we will be happy to look into it.

[willyguevara]

i have the same issue, it works perfectly disabling the full screen mode of the app.

[janey1986]

I'm having the same error in JQM 1.4.5, android 4.4.2 full screen mode. Has anyone found a way to resolve this problem, not by disabling full screen mode of the app. I have opened this as a new issue (I've only just found this thread) and I have posted sample code.

#8132

There must be some kind of jquery fix for this issue?

[mzk10k]

it worked changing config.xml preference "fullscreen" to "false".
Thanks kevinstumpf

[BriannaP1016]

I'm still experiencing this issue: Android soft keyboard hides input fields in phonegap app

• using jqm 1.4.5

• set config.xml preference "fullscreen" to "false"

• set config.xml preference "android-windowSoftInputMode" to "stateVisible|adjustResize"

  This only worked for me until more html was added into the page dynamically.When the length of the page content grew, the text field at the bottom was not being pushed up far enough. Somehow the height of the page is not being recalculated when the soft keyboard is opened again.
  The strange thing is that this doesn't happen when I use my app in a regular browser on android. Only when it is run through phonegap. Very frustrating !!!

[zigzag-way]

As soon as I changed config.xml preference "fullscreen" to "false"
I got this error:
11-11 14:05:43.095: E/Web Console(19301): Uncaught TypeError: Object # has no method 'lockOrientation':122

ps: I`m using Cordova + net.yoik.cordova.plugins.screenorientation plugin

[Rage-X]

Has this been fixed? I'm getting this problem with Android. The virtual keyboard does not push the screen up enough, and the input box is hidden.

Its been almost 5 years and there's still this issue going on lol.

[janey1986]

I never found a way round it.... I'm just not running my app in full screen mode which is annoying!!

[erperejildo]

This is amazing... more than 5 years and still having the same problem. Thanks Android...
Anyone knows perhaps a library or something to deal with this? I'm creating an app with Meteor + Angular and it would be really appreciated.

[mzk10k]

with the following configuration works perfectly.
<?xml version='1.0' encoding='utf-8'?> <widget id="web.infometer" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0"> <preference name="loglevel" value="DEBUG" /> <feature name="NetworkStatus"> <param name="android-package" value="org.apache.cordova.networkinformation.NetworkManager" /> </feature> <feature name="SQLitePlugin"> <param name="android-package" value="org.pgsqlite.SQLitePlugin" /> </feature> <feature name="Notification"> <param name="android-package" value="org.apache.cordova.dialogs.Notification" /> </feature> <feature name="Camera"> <param name="android-package" value="org.apache.cordova.camera.CameraLauncher" /> </feature> <feature name="File"> <param name="android-package" value="org.apache.cordova.file.FileUtils" /> <param name="onload" value="true" /> </feature> <feature name="FileTransfer"> <param name="android-package" value="org.apache.cordova.filetransfer.FileTransfer" /> </feature> <name>Infometer</name> <description> Hello World sample application that responds to the deviceready event. </description> <author email="[email protected]" href="http://phonegap.com"> PhoneGap Team </author> <content src="index.html" /> <preference name="android-windowSoftInputMode" value="stateVisible|adjustResize" /> <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="true" /> <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="true" /> <preference name="auto-hide-splash-screen" value="true" /> <preference name="disable-cursor" value="false" /> <preference name="android-minSdkVersion" value="7" /> <preference name="android-installLocation" value="auto" /> <gap:plugin name="org.apache.cordova.battery-status" /> <gap:plugin name="org.apache.cordova.camera" /> <gap:plugin name="org.apache.cordova.media-capture" /> <gap:plugin name="org.apache.cordova.console" /> <gap:plugin name="org.apache.cordova.contacts" /> <gap:plugin name="org.apache.cordova.device" /> <gap:plugin name="org.apache.cordova.device-motion" /> <gap:plugin name="org.apache.cordova.device-orientation" /> <gap:plugin name="org.apache.cordova.dialogs" /> <gap:plugin name="org.apache.cordova.file" /> <gap:plugin name="org.apache.cordova.file-transfer" /> <gap:plugin name="org.apache.cordova.geolocation" /> <gap:plugin name="org.apache.cordova.globalization" /> <gap:plugin name="org.apache.cordova.inappbrowser" /> <gap:plugin name="org.apache.cordova.media" /> <gap:plugin name="org.apache.cordova.network-information" /> <gap:plugin name="org.apache.cordova.splashscreen" /> <gap:plugin name="org.apache.cordova.vibration" /> <icon src="icon.png" /> <icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/icon-36-ldpi.png" /> <icon gap:platform="android" gap:qualifier="mdpi" src="www/res/icon/android/icon-48-mdpi.png" /> <icon gap:platform="android" gap:qualifier="hdpi" src="www/res/icon/android/icon-72-hdpi.png" /> <icon gap:platform="android" gap:qualifier="xhdpi" src="www/res/icon/android/icon-96-xhdpi.png" /> <icon gap:platform="blackberry" src="www/res/icon/blackberry/icon-80.png" /> <icon gap:platform="blackberry" gap:state="hover" src="www/res/icon/blackberry/icon-80.png" /> <icon gap:platform="ios" height="57" src="www/res/icon/ios/icon-57.png" width="57" /> <icon gap:platform="ios" height="72" src="www/res/icon/ios/icon-72.png" width="72" /> <icon gap:platform="ios" height="114" src="www/res/icon/ios/icon-57-2x.png" width="114" /> <icon gap:platform="ios" height="144" src="www/res/icon/ios/icon-72-2x.png" width="144" /> <icon gap:platform="webos" src="www/res/icon/webos/icon-64.png" /> <icon gap:platform="winphone" src="www/res/icon/windows-phone/icon-48.png" /> <icon gap:platform="winphone" gap:role="background" src="www/res/icon/windows-phone/icon-173-tile.png" /> <gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="www/res/screen/android/screen-ldpi-portrait.png" /> <gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="www/res/screen/android/screen-mdpi-portrait.png" /> <gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="www/res/screen/android/screen-hdpi-portrait.png" /> <gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="www/res/screen/android/screen-xhdpi-portrait.png" /> <gap:splash gap:platform="blackberry" src="www/res/screen/blackberry/screen-225.png" /> <gap:splash gap:platform="ios" height="480" src="www/res/screen/ios/screen-iphone-portrait.png" width="320" /> <gap:splash gap:platform="ios" height="960" src="www/res/screen/ios/screen-iphone-portrait-2x.png" width="640" /> <gap:splash gap:platform="ios" height="1136" src="www/res/screen/ios/screen-iphone-portrait-568h-2x.png" width="640" /> <gap:splash gap:platform="ios" height="1024" src="www/res/screen/ios/screen-ipad-portrait.png" width="768" /> <gap:splash gap:platform="ios" height="768" src="www/res/screen/ios/screen-ipad-landscape.png" width="1024" /> <gap:splash gap:platform="winphone" src="www/res/screen/windows-phone/screen-portrait.jpg" /> <access origin="*" /> </widget>

[farisyasrab]

Well, there is a work around for this that worked for me , you simply have to give ids to your input field and then do this:

$(your id).focusin(function() {

// detect if mobile

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ){

window.location.hash = "#"+$(this).attr('id');

// hide footer as well , as it comes up with the keyboard

}

});

[farisyasrab]

Please be advised that above solution doesn't work with firefox mobile. Its rare case , but still. So you can exclude firefox using following condition

if(/Android&webOS|Firefox/i.test(navigator.userAgent)){}

[chinnamsrichandan]

{{ 'WORK_HISTORY' | translate }}

{{ 'SAVE' | translate }} {{ 'SAVE' | translate }}

{{ 'YOUR_EXPERIENCE?' | translate }}

{{ 'DELETE_WORK_HISTORY' | translate }}

{{ 'JOB_TITLE' | translate }}

                <div ng-class="{true: 'error'}[(submitted && form.brandTitle.$invalid)||(form.brandTitle.$dirty && form.brandTitle.$invalid)]">
                    <label class="item item-input item-stacked-label">
                        <span class="color-grey input-label">{{ 'COMPANY' | translate }}</span>
                        <input class="lightgray-color" ng-pattern="/^[a-zA-Z0-9_ !@#$%^&*()+\-=\[\]{}\\|,.<>\/?]*$/" type="text" name="brandTitle" required placeholder="{{ 'COMPANY' | translate }}" ng-model="experience.brandTitle">
                    </label>
                </div>
                <!-- <ion-item class="color-grey">
            <input type="checkbox" class="float-right" ng-model="experience.currentlyWorking" />
        </ion-item> -->
                <ion-item>
                    <div class="checkbox row">
                        <div class="col-90 pts">
                            <span class="term-padding medium-font lightgray-color">{{ 'CURRENTLY_WORK' | translate }}</span>
                        </div>
                        <div class="col-10">
                            <label class="item item-checkbox ng-valid">
                                <div class="checkbox checkbox-input-hidden disable-pointer-events checkbox-square">
                                    <input type="checkbox" name="currWork" ng-model="experience.currentlyWorking" class="ng-untouched ng-valid ng-dirty ng-valid-parse" value="on">
                                    <i class="checkbox-icon"></i>
                                </div>
                                <div class="item-content disable-pointer-events"></div>
                            </label>
                        </div>
                    </div>
                </ion-item>
                <div class="row pan">
                    <div class="col-50 ptn">
                        <label class="item item-input item-stacked-label bn">
                            <span class="color-grey input-label">{{ 'FROM_DATE' | translate }}</span>
                            <input class="lightgray-color" id="expFromDate" type="month" max="maxDate" ng-model="expFromDate" ng-change="datePickerCallbackFromDate()">
                        </label>
                    </div>
                    <div class='col-50 ptn'>
                        <label class="item item-input item-stacked-label bn">
                            <span class="color-grey input-label">{{ 'TODATE' | translate }}</span>
                            <input class="lightgray-color" type="month" id="expToDate" max="maxDate" ng-model="expToDate" ng-change="datePickerCallbackToDate()" ng-disabled="experience.currentlyWorking">
                        </label>
                    </div>
                </div>
                <label class="color-grey item item-input item-stacked-label ptl">{{ 'WHAT_DID_U_DO' | translate }}
                    <textarea rows="5" name="note " maxlength="200" class="lightgray-color" ng-model="experience.description" required></textarea>
                </label>
            </div>
            <!-- <ion-item class="color-grey">
        <ion-label></ion-label>
        <input type="checkbox" class="float-right" ng-model="experience.currentlyWorking" />I currently work here
    </ion-item> -->
    </ion-content>
</form>

Please check the above code, i need to highlight the input text field what i have selected. But in android i am fail. In iOS it is working fine. I tried almost all possibility's from stackoverflow,github,ionic framwork. Please help me out.

Thanks in advance.

[vijay31aug]

hello, this code worked for me , you don't need to give ids to your input field:

$(document).on('pageinit', '[data-role="page"]', function () {
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ){
$('input, textarea').focusin(function() {
if ($(this).arrt('type').toLowerCase() != 'number');
$(this).focus();
});
}
});