移動端 關於 鍵盤將input 框 頂上去的解決思路---個人見解

標籤：

    在移動端，經常會遇到input獲得焦點時候彈出的虛擬鍵盤將整體頁面配置打亂的情況。 比如說是這種

    輸入框未獲得焦點鍵盤未抬起的時候：

       

 

 輸入框獲得焦點鍵盤抬起的時候

        

 

     這種情況下，不管是上面的textarea還是下面的input輸入框，它們任意一個獲得焦點的時候，手機的虛擬鍵盤都會抬起將fixed定位於螢幕最低端的 “提交”按鈕頂到螢幕 “中間”位置，嚴重影響布局，這就測試人員來看是一個不可饒恕，已經足已被開除的底部，怎麼解決這個問題呢？對於布局不是很複雜的 "提交"頁面而言，可以採用動態擷取底部footer的offset().top 再減去其父元素offset().top ，將其差值當作footer的的margin-top數值的，同時remove掉footer的fixed屬性。

      具體的解決步驟如下：

1.    將footer 外麵包裹一個父級div,賦給其類名 footer-wrap，footer fixed絕對位置與螢幕的底部
2.  分別擷取footer和footer-wrap的offset().top,計算差值，remove掉footer的fixed屬性，然後賦值給footer的margin-top

     鍵盤抬起後，頁面如下：

        

 

  

然後，這個問題就解決了，當然這是對於這種布局非常簡單的頁面而言，能夠做到完美解決不留bug，但是對於更加複雜的頁面是否也能過做到完美適配，還不得而知，望各位見諒，待到遇見了這種問題，本人再補充。、

 

移動端 關於 鍵盤將input 框 頂上去的解決思路---個人見解