iPhone Web App - Prevent keyboard from moving/push up view - iOS8

Question

In all versions prior to iOS8, I was able to prevent the iPhone keyboard from pushing up (and destroying) my html/css/js view when the keyboard appeared by the following method:

$('input, select').focus(function(event) {
        $(window).scrollTop(0);
        // or via the scrollTo function
});

Since iOS8, this no longer works. One workaround is to place this code within a setTimeOut

setTimeout(function() { $(window).scrollTop(0); }, 0);

But it only makes the view do a jerky motion as the view is initially pushed up by iOS, then dragged back down by my js code. preventDefault and stopPropagation does not help either.

I've tried everything available on the web of course including my own solution posted here: How to prevent keyboard push up webview at iOS app using phonegap but so far, nothing works for iOS8. Any clever ideas on how to prevent the keyboard in iOS8 to push/move the view?

Answer 1

Try position:fixed on body, and/or wrap content in a div and position:fixed on it as well.

Answer 2

There are some options :

1. Make listener on your ios code, to move the screen up along with the keyboard height, so everything move up along with the keyboard, then your design save.

2. Make your css design responsive. Then no problem with change height, it will be scrollable inside your webview.

Answer 3

When keyboard pushes up view in iOS, a scroll event is triggered ($(window).scrollTop() is changed). You can put $(window).scrollTop(0) inside the scroll event handler. To prevent the jerky motion, set opacity to 0 during scrolling. Related codes may look like this:

function forceScrollTop() {
  var scrollTop = $(window).scrollTop();
  if (scrollTop != 0) {
    $(window).scrollTop(0);
    $(selector).css('opacity', 1);
    $(window).off('scroll', forceScrollTop);
  }
}
// when an input is focused ... 
$(selector).css('opacity', 0);
$(window).on('scroll', forceScrollTop);