Question

When an input field at bottom of the screen has focus, the keyboard pushes up my webview and the upper part of the page is not visible anymore.

I want to prevent the keyboard pushing up the webview.

Anyone has an idea ?

Answer 1

On focus, set window.scrollTo(0,0); This prevents keyboard from pushing up webview completely

$('input').on('focus', function(e) {
    e.preventDefault(); e.stopPropagation();
    window.scrollTo(0,0); //the second 0 marks the Y scroll pos. Setting this to i.e. 100 will push the screen up by 100px. 
});

If you don’t want to set a static value for your Y scroll position, feel free to use this short plugin I’ve written that automatically aligns the keyboard underneath the input field. It’s not perfect, but it does the job. Just call this on focus as shown above:

setKeyboardPos(e.target.id);