jQuery mobile如何在Mobile Web浏览器中停止自动滚动到焦点输入 [英] jquery mobile How to stop auto scroll to focused input in Mobile web browser

问题描述

在移动设备中，当我打开页面并选择一个输入框时，虚拟键盘便会打开，并且页面会自动滚动以将输入框置于中间.

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.

我不希望执行此操作. 我在Google上搜索了很多答案，其中大多数建议在调整大小事件中手动调用以下javascript代码.

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.

推荐答案

好的.

因此，您现在可以通过以下答案了解如何检测虚拟键盘打开事件: jquery mobile如何检测是否打开了移动虚拟键盘

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.

所以这是一个棘手的方法:您只是欺骗移动设备以至于认为该元素现在处于最高位置，而对于 iOS 和 Android ，此技巧将以不同的方式完成strong>.

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

以下代码将非常适合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.

因此在下面的示例代码中，$ wrap是页面的全部内容，$ wrap.find('.content')是活动输入框上方的元素，因此只需隐藏它即可欺骗移动设备，然后稍后再显示一次.

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

好，到目前为止，这些都是有效的代码，但不能保证新版本的移动设备OS. :-)

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

老实说，我真的希望移动Web浏览器支持某些钩子和功能来处理此类令人头疼的问题.

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

这篇关于jQuery mobile如何在Mobile Web浏览器中停止自动滚动到焦点输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！