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

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

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

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

　　所以就需要改變監測的方式，最直接最簡單的方式就是檢測屏幕內容區域的大小改變。當進入這個頁面的時候先確定一個大小的值，我們命名為“h”，當內容區域改變的時候監測這個最新區域的大小，如果小於了，我們就認為現在是小鍵盤彈起了，就讓下面的按鈕隱藏，當鍵盤下去的時候，最新的區域大小是等於原來的大小的，就讓底部的按鈕顯示；這樣就能比較完美的解決這個問題。廢話不多說，下面直接上代碼：

　

var h = document.body.scrollHeight;
window.onresize = function(){
    if (document.body.scrollHeight < h) {
        document.getElementsByClassName("sure_sell")[0].style.display = "none";//我的下面的按鈕的class名為sure_sell
    }else{
        document.getElementsByClassName("sure_sell")[0].style.display = "block";
    }
};

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