Android軟觸摸鍵盤隱藏輸入字段

Question

我有一個簡單的CSS的PHP Web應用程序。當我在Android平板電腦上運行該應用程序並嘗試登錄時，軟觸鍵彈出並隱藏我的文本輸入字段。我曾嘗試在堆棧溢出上搜索類似的問題，但所有問題都與asp.net相關。沒有什麼特別提到其他語言。 我試圖把foloowing解決方案，但沒有工作：

//添加此上的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在我的例子）。