CODEWITHSUNDEEP
javascriptjquerycsskeyboardios8
Jonathan
Jonathan

Reputation: 2983

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

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?

Upvotes: 16

Views: 5073

Answers (3)

Wang Jianshu
Wang Jianshu

Reputation: 11

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);

Upvotes: 1

Bhimbim
Bhimbim

Reputation: 1384

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.

Upvotes: 1

jdmayfield
jdmayfield

Reputation: 1527

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

Upvotes: 1

Related Questions