6

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.

Raine Revere
  • 30,985
  • 5
  • 40
  • 52
Wilson Breiner
  • 155
  • 1
  • 2
  • 9

1 Answers1

6

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.

Codemole
  • 3,069
  • 5
  • 25
  • 41
  • While this is working perfectly, it has one case of not-working. Can you check the case and help me how to handle that case here: https://stackoverflow.com/questions/47854231/javascrip-mobile-prevent-scrolldown-effect-when-focus-move-to-next-input-in-ios – Wilson Breiner Dec 17 '17 at 10:36
  • I'm not really using jquery in my project and adding that jquery code and running it on IOS isn't really working. Maybe it has to do with me not using touchstart in my project? I use javascript's focus() to get it on the next input block. Here's a video of my problem https://youtu.be/UmHJVxqrLS8 – Joshua Segal Sep 21 '19 at 18:23