iPhone keyboard pushes page up in phonegap

Question

I am developing an iOS app in phonegap / cordova 3.3.0 with jquery mobile 1.4.2
I have designed a page with multiple textboxes for input but when iPhones native keyboard opens it pushes page up in iphone 4, in an iphone 5 also i face same issue but page comes to original state after closing keyboard, but in iphone 4 page stucks at the top in pushed position. Check screen shots below. enter image description here
this is screen
this is when keyboard open

after closing keyboard is closed enter image description here
please help...

possible duplicate of [PhoneGap Page scroll up after Keyboard appearance in iOS devices that makes the PhoneGap page corrupted](http://stackoverflow.com/questions/15000660/phonegap-page-scroll-up-after-keyboard-appearance-in-ios-devices-that-makes-the) — byJeevan, Jun 24 '14 at 05:30

score 2 · Accepted Answer · edited May 23 '17 at 12:01

2

For now you can add a:

document.body.scrollTop = 0;

whenever the input field fires a blur event.

courtesy: link

edited May 23 '17 at 12:01

Community

1
1

answered Jun 24 '14 at 06:52

Sushant

391
12
28

score 1 · Answer 2 · answered Jan 11 '15 at 16:11

Not sure if it's relevant anymore, but i will add it anyway cause it fix my issue, i just added:

  window.addEventListener('native.keyboardhide', function(){
                            window.scrollTo(0,0);
                        });

and it solves my issue.

score 0 · Answer 3 · answered Jan 21 '15 at 06:06

I came across similar situations but I need to keep the focused field at bottom. Notice that I cater the situations for different iphone models based on the window size.

  function fixKeyboardOffset(){
    var iOSOffset = 0;
    switch ($(window).height()){
      case 716 : iOSOffset = 340; break;
      case 647 : iOSOffset = 285; break; 
      case 548 : iOSOffset = 190; break;  
      case 460 : iOSOffset = 110; break;  
    }
    if (device.platform == 'iOS'){
        $('#comment-field').on('focus', function(e) {
          $('html, body').animate({
              scrollTop: $("#content_comment_container").offset().top - iOSOffset
          }, 0);
        });
    }
  }

score -1 · Answer 4 · answered Jun 24 '14 at 05:29

-1

Try to add:

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

This is how I solved same issue in phonegap build.

answered Jun 24 '14 at 05:29

byJeevan

3,728
3
37
60

thanks for your reply. I tried this but didnt helped. – Sushant Jun 24 '14 at 06:49

iPhone keyboard pushes page up in phonegap

4 Answers4

Linked