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

Question

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

我不想要这个 Action 。
我搜索了很多答案，其中大多数建议在调整大小事件中手动调用以下 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 和 安卓 .

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

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

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