頁面底部input被彈出來的鍵盤遮擋(iOS系統)—附解決方案

標籤：原因   pos   有用   bottom   source   needed   各路   高度   input   

項目上要做一個留言回複的框.
類似這種用一個div套在input外面, 點擊按鈕時, 這個div出現, 位於頁面底部. 並且input獲得焦點, 自動彈出系統鍵盤.

但是, 在開發的時候發現,在iOS系統中這個div總是被鍵盤遮住, 曾經使用了墊高div框的辦法, 天真的以為能夠使它往上挪, 但是發現沒有用, 需要手動往上拉才能出來.

查了很久, 看網上很多人都死在了這個問題上.

比較靠譜的答案在知乎上找到的
原因是fixed定位加上bottom:0在ios裡無效了, 有人建議是改為彈性布局, 有人建議js控制.

一開始我也採用了js控制, 但是發現效果不太好. 有時第一次點擊的時候, 還是會出現input框被遮蓋的問題, 必須手動往上滑動, 把div拉出來後, 再次點擊, 才會不被遮住...我也不知道為何....

而且在安卓上是沒有這種問題的, 只在iOS系統上出現, 並且還和系統的版本有關. 之前使用了scrollIntoView()之後感覺好用了很多, 但是後來又反應被遮住了. 發現原來和iOS系統版本也有關係. 參考了知乎上的各路答案後, 找到了一個比較靠譜和折中的辦法. 就是獲得html或者body的高度, 然後點擊的時候令捲軸滾動到底部.

    var scrollHeight = $(‘html‘).prop("scrollHeight");    var target = document.getElementById("comment-content");     target.focus();     // 使用定時器是為了讓輸入框上滑時更加自然    setTimeout(function(){        //target.scrollIntoView(true);        // target.scrollIntoViewNeeded();        $(‘.add-comment‘).animate({scrollTop:scrollHeight}, 100);    },100);

被注釋掉的是以前使用的方法, 用這種方法時, 配合設定html標籤和body標籤的height:100%和overflow: hidden來使用更加酥脆...不過現在我已經改用 scrollTop後, 感覺有沒有都一樣, 就刪去了.

頁面底部input被彈出來的鍵盤遮擋(iOS系統)—附解決方案