原生APP的彈出虛擬鍵盤和收回虛擬鍵盤，輸入框始終貼在虛擬鍵盤的上方。如下圖：
如果移動(dòng)端web也想做類似的功能，可以實(shí)現(xiàn)嗎？
你可能會(huì)說著：“不就是放一個(gè)position: fixed;的輸入框在頁面底部嘛，有什么好難的？!”
當(dāng)時(shí)我也是這么想的(⊙﹏⊙)，但事實(shí)真的是這樣嗎？下面我們來看一些測試結(jié)果。
安卓4.2.1－qq瀏覽器，測試結(jié)果如下：
如圖所示，輸入框不見了。。。
再看看ios的safari：
為何又多了條白帶？
還有，收起鍵盤后，為啥頁面下移了。。。
好吧，其實(shí)這只是問題的冰山一角。
進(jìn)入正題，怎么才能解決這些問題呢？
我們可以先從虛擬鍵盤入手，看看是否可以監(jiān)聽到呼出鍵盤、收回鍵盤這兩個(gè)事件。
部分瀏覽器可以通過捕捉resize事件知道是否呼出收起虛擬鍵盤。
測試頁：http://backtonaturedemo.github.io/frontend/case/keyborad/resize.html
下面是測試的結(jié)果：
iPhone 5s iOS 8.2 ：
（n表示不能觸發(fā)resize事件，y表示能觸發(fā)resize事件）
注意：ios的UC瀏覽器中，點(diǎn)擊fixed定位的輸入框，呼出鍵盤后無法輸入。
Coolpad8720Q Andorid 4.2.1
那么監(jiān)聽focus和blur事件又如何呢？
測試頁：http://backtonaturedemo.github.io/frontend/case/keyborad/focusblur.html
用上述兩臺(tái)機(jī)器繼續(xù)測試，結(jié)論如下：
1. ? ios和安卓點(diǎn)擊輸入框都會(huì)觸發(fā)focus事件
2. ? ios的所有瀏覽器點(diǎn)擊虛擬鍵盤的“完成“鍵或者其他方式收起鍵盤都會(huì)觸發(fā)blur事件
3. ? 安卓手機(jī)在點(diǎn)擊”收起按鈕“或者其他操作收起鍵盤的時(shí)候，沒有觸發(fā)blur事件，焦點(diǎn)還是在輸入框上。
下面為測試截圖
所以，可以采取如下方案做web評論發(fā)表框
示例頁面:http://backtonaturedemo.github.io/frontend/case/keyborad/demo1.html
1. ?除評論框以外的元素都放在一個(gè)父元素，這里父元素是main。
2. ?評論框和發(fā)布按鈕放在一個(gè)div里
呼出鍵盤后，隱藏.main（除評論框以外的元素）。
撐高輸入框，取消輸入框的fixed，加入上外邊距（給發(fā)表按鈕留下位置）。
當(dāng)輸入框blur或點(diǎn)擊取消，還原頁面。
注意：需要在呼出鍵盤前，紀(jì)錄下頁面滾動(dòng)條位置。
