0

When the soft keyboard is opened in android the viewport is automatically resized to fit the screen (device height - keyboard height). In iOS7 the viewport is simply pushed up (the top half just doesn't get displayed).

While it might be the desired behavior for some apps, it doesn't work well for me - the top nav bar gets hidden, and my content is a scrollable div - I want the user to be able to scroll all the way up.

Resizing the body manual when the keyboard opens/closes results in jittery behavour

Any idea how to solve this?

EugeneMi
  • 3,475
  • 3
  • 38
  • 57

1 Answers1

0

I was having exactly the same requirement. The solution was a mix of reducing body height when the keyboard is shown and fixing the shifting of the content area. This is how the code would look like using jQuery:

$(document).on("focus", "input, textarea", function() {
  $(‘html’).addClass("keyboard");

  setTimeout(function() {
    window.scrollTo(0,0);
    document.body.scrollTop = 0;
  }, 0);
});

$(document).on("blur", "input, textarea", function() {
  $(‘html’).removeClass("keyboard");
});

And the corresponding CSS:

body {
  position: absolute;
  top: 0;
  bottom: 0;
}

.keyboard body {
  bottom: 240px; /* exemplarily value */
}

The bottom value needs to be adjusted to match the correct keyboard height on iPhone portrait, iPhone landscape, iPad portrait and iPad landscape.

I havn't tested this code in a while, so maybe you could check whether this works for you without any flickering? If I remember correctly I had slight flickering in Mobile Safari, but it worked fine within the native WebView.

Patrick Rudolph
  • 2,201
  • 17
  • 30
  • Thanks! I tried this. bit every time the keyboard opens/closes I get flickering – EugeneMi Aug 01 '14 at 09:02
  • Hmm that is very unfortunate. You might need to write a native module to find a workaround for this issue. Check out http://stackoverflow.com/questions/8494868/prevent-uiwebview-for-repositioning-for-input-field Having a look at all methods related to shrinking on this PhoneGap plugin might also help: https://github.com/twilly86/CordovaKeyboardTest/blob/master/plugins/org.apache.cordova.keyboard/src/ios/CDVKeyboard.m – Patrick Rudolph Aug 01 '14 at 09:31
  • So I tried it again - the problem seems to be damn_you_form_assist. Individually they work fine, but if you combine them, whichever one is executed 2nd flickers. – EugeneMi Aug 06 '14 at 20:43