Scroll webpage input. The Up field will prevent hiding using the Soft Keyboard

Question

I have a webpage used on mobile devices, when you click on input fields, the Android Soft keyboard hides input fields when I click on input field. I want the field to scroll up to become visible above the keyboard.

I am looking for various articles, many link to the Android manifest file, but this is a web page, not an application. I also tried various javascript options, including the one below, but many browsers don't seem to like the .focus event. It works on chrome, but not on many others.

jQuery(function ($) {
        $("#Litres").focus(function () {
            document.body.scrollTop = $(this).offset().top;
        });
    });

Does anyone have a simple solution to achieve the desired effect for a web page.

Answer 1

while this solution does not automatically scroll your field in the view, I found that it solves the problem of scrolling the page when the soft keyboard is active.

Answer thread here: fooobar.com/questions/376170 / ...

I found adding the following CSS at my maximum size: 768px media request made the native mobile browser respond to scrolling while the keyboard was active:

html { 
   overflow: auto; 
} 
body { 
   height:auto; 
   overflow: auto; 
} 
.scrollable { 
   position:inherit; 
}

Hope this helps you, or someone like me who struggled to find a solution.

Hurrah!

: jQuery, - flexbox, , . script , Mobi (*, iOS Android, , ) , .

if (/Mobi/i.test(navigator.userAgent)) {
    $('html').css({"overflow":"auto"});
    $('body').css({"height":"auto"});
    $('body').css({"overflow":"auto"});
    $('.scrollable').css({"position":"inherit"});
}

, , , , - .