使用微信開啟網頁，彈出軟鍵盤時遇到的相容問題

**：原文

過去開發中遇到過很多這種情況，頁面底部需要固定定位乙個按鈕，廣告欄或者選單欄，頁面中有表單項需要填寫，在開啟手機虛擬鍵盤的時候，底部固定定位的元素會處在軟鍵盤上方，把本來就所剩無幾的頁面幾乎都擋住了（一般發生在不使用框架的單獨頁面中），而瀏覽器並沒有為開發者提供呼出軟鍵盤的事件監聽方法。

之前我的解決方法是12

3456

789window.onresize =function()else

}

當使用者呼出軟鍵盤時，頁面會觸發resize事件，頁面大小變小，高度只有原有高度減去鍵盤高度的高度，一般都小於500，

同時市面上也幾乎沒有螢幕原有高度就小於500的手機，所以在resize觸發後判斷，如果document.body.clientheight<500

即視為呼出軟鍵盤，此時可以隨意處理礙眼的元素了，只是要記得鍵盤收回後能一切復原就行。

準確地說，是情況變得不穩定，安卓手機還正常，但是在ios中，正常的情景是：

點選輸入框-彈出軟鍵盤-底部元素自動處在鍵盤下方被覆蓋(這是未作任何處理的情況，可以說已經解決了問題)，

可惜會有一定的機率出現底部元素跑到鍵盤上方遮擋其他元素的情況。而我上面的**則完全沒有響應，底部元素並沒有隱藏。

在一番檢查之後發現了原因，resize事件根本沒有被觸發。

我們知道clientheight指的是網頁可視區高度，呼出鍵盤它並沒有改變，也沒有將頁面頂上去，而是自動定位在了獲取焦點的表單元素上，虛擬鍵盤覆蓋在了原來的頁面上，所以clientheight沒有改變，更不會小於500。

$('表單父元素').on('focus','input',function())
$('表單父元素').on('blur','input',function())

表單元素獲取焦點時隱藏底部元素，失去焦點時重新顯示。頁面比較簡單，所以這麼寫也沒什麼問題。

總結：彈出虛擬鍵盤時，獲取焦點元素會自動滾動到鍵盤上方的區域方便檢視，但是因為這個原因，當點選頁面靠下的表單項時，

固定定位在底部的元素會有機率顯示在虛擬鍵盤區域上方遮蓋其它內容，在製作存在這種互動可能的產品時應多加注意。