移動端解決input被IME擋住的問題

標籤：底部   set   nim   指定   css   解決   設定   邊框   滾動   

有過移動端web開發經驗的人應該都會遇到這個問題，一個input在頁面最底部或者偏下的位置，輸入時由於IME的彈出，在部分瀏覽器下由於不會自動計算window的高度，導致input被IME擋住。
本文的解決方式是利用scrollTop來解決，在input擷取焦點後，動態地設定body的高度並設定scrollTop到指定位置，這樣可以保證input會滾動到IME上方，失去焦點後再恢複原來的位置。
有兩種情況：
1、input在頁面最底部，後面沒有其他元素，這種情況我們可以擷取視窗的高度減去input的高度再減去一些空餘高度，可以得到應該滾動的高度，var scrollHeight = $(window).height() - $(‘input‘).height() - 40，這種情況下這麼計算很合適，沒什麼問題。
2、然而有時候input不是在最底部，之後還有其他元素，如果按照上一種方式，當你滾動到input在螢幕中間或者上部的時候，由於滾動距離還是上一種方式擷取的，這個時候滾動距離會大於應該滾動的距離，導致input直接到頁面上方被隱藏了。
     這個時候我們換種思路，只要想辦法擷取input到視窗的上邊框的距離即可，其他代碼都一樣，那麼可以這麼寫，var scrollHeight = $(‘input‘).offset().top - $body.scrollTop() - 40，即input距離頁面頂部的高度減body滾動的高度獲得input距離視窗上方的高度。

完整代碼：線上預覽1 線上預覽2

<div style="height: 1000px;"></div>  <input type="text" style="width: 100%;height: 40px; ">  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>  <script>    var scrollHeight, //應該滾動的距離      $body = $(‘body‘)    $(‘input‘).on(‘focus‘, function () {      //input距離頁面頂部的高度減body滾動的高度獲得input距離視窗上方的高度，40表示距離頂部留點空隙      scrollHeight = $(‘input‘).offset().top - $body.scrollTop() - 40      console.log(scrollHeight)      //先修改body的高度，在滾動到對應的位置      $body.height($body.height() + scrollHeight).animate({scrollTop: $body.scrollTop() + scrollHeight}, 300);    }).on(‘blur‘, function () {      //input失去焦點後恢複到原來的位置      $body.animate({height: $body.height() - scrollHeight, scrollTop: $body.scrollTop() - scrollHeight}, 300)    })  </script>

 

移動端解決input被IME擋住的問題