jquery mobile How to stop auto scroll to focused input in Mobile web browser

Question

In mobile device, when I open my page, and select an inputbox, the virtual keyboard is open, and page got scrolled automatically to put inputbox at center.

I do not want this action. I have googled many answers, most of them suggested to manually call following javascript code in resize event.

window.scrollTo(0,0)

But when I tried, it makes the page twitched, like page scrolled down, and then got back shortly.

Any good solution? Thanks.

Answer 1

Okay.

So now you know how to detect virtual keyboard open event, by following answer: jquery mobile how to detect if mobile virtual keyboard is opened

For rough approach, you can add following code in the handler:

setTimeout(function(){
    window.scrollTo(0,0);
}, 100);

But this really makes the page flickered, and not a smooth solution.

What you need to know is that mobile device tries to detect active input element position, and if it s about to hidden by the keyboard, then simply scroll the whole page down, to make it shown fully.

So here is the tricky way: you just deceive mobile device to think that element is very top position now, and this trick will be done in different way for iOS and Android.

iOS

Following code will work perfect for iOS:

$(document).on('touchstart', 'textarea, input[type=text], input[type=date], input[type=password], input[type=email], input[type=number]', function(e){

            var intv = 100;
            var $obj = $(this);

            if (getMobileOperatingSystem() == 'ios') {

                e.preventDefault();
                e.stopPropagation();

                $obj.css({'transform': 'TranslateY(-10000px)'}).focus();
                setTimeout(function(){$obj.css({'transform': 'none'});}, intv);
            }
            return true;
        });

Android

In the virtual keyboard open event handler, hide some elements above the active input element, to make mobile device thinks active input element is in very top, and then after some seconds, show the hidden things again.

So in following sample code, $wrap is the whole content of the page, and $wrap.find('.content') is the elements above the active inputbox, so simply hide it to trick the mobile device, and then show back again shortly.

function onKeyboardOnOff(isOpen) {
    // Write down your handling code
    if (isOpen) {
        // keyboard is open
        $wrap.css({opacity: 0})
           .find('.content').hide(); // trick the browser thinks the element is relatively top position... 
        setTimeout(function(){
            $wrap.css({opacity: 1})
                 .find('.content').show();
        }, 10);
    }
}

Well, so far these are working code, but not guaranteed for new version of mobile device OS. :-)

Honestly I really want mobile web browsers support some hook and functions to handle this kind of headache issues.