jquery mobile 如何停止自动滚动到移动网络浏览器中的焦点输入

Question

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

我不想要这个动作。 我搜索了很多答案，其中大多数建议在调整大小事件中手动调用以下 javascript 代码。

window.scrollTo(0,0)

但是当我尝试时，它使页面抽动，就像页面向下滚动，然后很快又回来了。

有什么好的解决办法吗？ 谢谢。

Answer 1

好的。

现在您知道如何通过以下答案检测虚拟键盘打开事件： jquery mobile how to detect if mobile virtual keyboard is opened

对于粗略的方法，您可以在处理程序中添加以下代码：

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

但这确实让页面闪烁，而且不是一个流畅的解决方案。

您需要知道的是，移动设备会尝试检测活动输入元素的位置，如果它即将被键盘隐藏，则只需向下滚动整个页面，使其完全显示。

所以这是一个狡猾的方法：你只是欺骗移动设备认为该元素现在处于非常顶部的位置，并且这个技巧将在 iOS 和 Android 中以不同的方式完成强>.

iOS

以下代码非常适合 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;
        });

安卓

在虚拟键盘打开事件处理程序中，隐藏活动输入元素上方的一些元素，让移动设备认为活动输入元素在最上面，然后在几秒钟后，再次显示隐藏的东西。

所以在下面的示例代码中，$wrap 是页面的全部内容，$wrap.find('.content') 是活动输入框上方的元素，所以只需将其隐藏以欺骗移动设备，然后稍后再显示。

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

嗯，到目前为止，这些都是工作代码，但不能保证新版本的移动设备操作系统。 :-)

老实说，我真的希望移动网络浏览器支持一些钩子和函数来处理这种令人头疼的问题。