Android 软触摸键盘隐藏输入字段

Question

我有一个带有简单 css 的 PHP Web 应用程序。当我在 Android 平板电脑上运行该应用程序并尝试登录时，软触摸键盘会弹出并隐藏我的文本输入字段。我曾尝试在堆栈溢出上搜索类似问题，但所有问题都与 asp.net 相关。没有特别提到其他语言。我试过把下面的解决方案，但没有奏效：

//在document.ready函数上添加了这个

if(navigator.userAgent.indexOf('Android') > -1){           
     $('html').css({ "overflow": "auto !important" });
     $('body').css({ "height": "auto !important" });
     $('body').css({ "overflow": "auto !important" });
     $('.scrollable').css({ "position": "inherit !important" });
     $('body').on('focusin', 'input, textarea', function(event) {
          //alert("test");
          var scroll = $(this).offset();
          window.scrollTo(0, scroll);               
     });
}

或
//添加到 css 文件中

html { 
   overflow: auto; 
} 
body { 
   height:auto; 
   overflow: auto; 
} 
.scrollable { 
   position:inherit; 
}

请帮忙。
谢谢

Answer 1

我给你准备了一个小提琴，也许你可以用它：https ://jsfiddle.net/fe82uhrp/1/

JS：

/***** using jQuery *****/

$('input').focus( function() {

    var $input = $(this);
    $input.css('background', 'yellow');

    var scroll = $input.offset();
    $input.closest('#viewport').animate({
      scrollTop: $input.offset().top
    }, 'slow');
});


/***** using plain JS *****/

var viewport = document.getElementById('viewport');
var allInputs = document.getElementsByTagName('input');
for( var i=0; i<allInputs.length; i++) {

    var item = allInputs[i];
    console.log('set focus event handler on', item)
    item.onfocus = function() {
        this.style.background = "yellow";
        item.scrollIntoView();
    }
};

我不会使用滚动窗口本身，而是使用页面包装容器（在我的示例中为#viewport）。