input 輸入框被軟鍵盤遮擋問題

1.安卓手機

在軟鍵盤被彈起來的時候輸入框不被遮擋，支持性良好

2.ios手機

在軟鍵盤被彈起來的時候輸入框被遮擋，體驗很很差

 

在通過屢次實驗發現，ios手機輸入框被彈起的瞬間是不被遮擋的，過了一會就會往下掉落，正好讓軟鍵盤遮擋住輸入框，本人推測輸入框往下掉落是由於輸入框獲取焦點的時候頁頭上面的警告提示彈框所致。

 

在有些ios手機上，輸入框每次都往下掉落被軟鍵盤擋住，在有些ios手機上，輸入框只有在第一次獲取焦點的時候往下掉落，之後就不會。

我嘗試用scrollIntoView(),並無解決個人問題，因爲我以前的猜想是警告彈框的問題致使輸入框下落，我就猜測，若是我時時糾正彈框的位置，讓document.body.scrollTop = document.body.scrollHeight;這樣會不會就會好不少,我用定時器實時監聽，代碼以下

var interval;
var scrolltopBefor=document.body.scrollTop;//獲取調用軟鍵盤以前瀏覽器滾動的高度
$(".input-text").focus(function(){
	interval = setInterval(function(){
	      document.body.scrollTop = document.body.scrollHeight;//讓瀏覽器滾動到最底部
	//	  focusNumber++;
	//	  if(focusNumber>=5){
	//	       clearInterval(interval);//清除計時器
	//	   }
    },100)
}).blur(function(){//設定輸入框失去焦點時的事件
    setTimeout(function(){
		 clearInterval(interval);//清除計時器
		 document.body.scrollTop = scrolltopBefor;//恢復到調用軟鍵盤以前瀏覽器的高度
    },500);
 });

我原本想當監聽十幾回以後清除定時器，後來試驗不行仍是會掉下去，因此只有在失去焦點的時候監聽清除定時器

後來測試發現，兼容了大部分ios手機，還有一小部分手機在輸入法爲九宮格的時候輸入框沒辦法失去焦點事件，評論就發表不出去，最後只能放棄了那一小部分手機進行實時監聽的解決方案。