1. 程式人生 > >移動端 關於 鍵盤將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

     鍵盤擡起後,頁面如下: