微信公衆號頁面的web頁面鍵盤彈起問題

今天開發的過程當中，遇到了一個小問題，是這樣的，  UI的設計稿中有個底部的按鈕是相對於屏幕定位的，可是這個頁面還有一個輸入框；具體狀況請看下圖：

　　這就形成了當咱們輸入框獲取焦點的時候，鍵盤彈起，下面的「確認出售」按鈕會跑到鍵盤的上面去，見截圖：

因此這個就有錯誤了。去網上找了解決方案，可是他是在監測輸入框是否有焦點，可是手機在收起鍵盤的時候，輸入框還是有焦點的。這個時候這個方法就不能成功了。可是他的思想是正確的，就是在鍵盤彈起的時候，隱藏下面的按鈕，等到鍵盤收起的時候在顯示，這樣的話就不會出現上圖的狀況了。

　　因此就須要改變監測的方式，最直接最簡單的方式就是檢測屏幕內容區域的大小改變。當進入這個頁面的時候先肯定一個大小的值，咱們命名爲「h」，當內容區域改變的時候監測這個最新區域的大小，若是小於了，咱們就認爲如今是小鍵盤彈起了，就讓下面的按鈕隱藏，當鍵盤下去的時候，最新的區域大小是等於原來的大小的，就讓底部的按鈕顯示；這樣就能比較完美的解決這個問題。廢話很少說，下面直接上代碼：

　

1 var h = document.body.scrollHeight;
2 window.onresize = function(){
3     if (document.body.scrollHeight < h) {
4         document.getElementsByClassName("sure_sell")[0].style.display = "none";//個人下面的按鈕的class名爲sure_sell
5     }else{
6         document.getElementsByClassName("sure_sell")[0].style.display = "block";
7     }
8 };

注意，這段代碼是針對安卓微信公衆號的web頁面的。對於ios不會觸發onresize的這個函數的，固然，ios也不存在上述的問題，貌似是由於ios鍵盤彈起的時候，是整個頁面往上滑，整個頁面的佈局不會變。