虛擬鍵盤，移動web開發的痛

原生APP的彈出虛擬鍵盤和收回虛擬鍵盤，輸入框始終貼在虛擬鍵盤的上方。以下圖：

若是移動端web也想作相似的功能，能夠實現嗎？ 

你可能會說着：「不就是放一個position: fixed;的輸入框在頁面底部嘛，有什麼好難的？!」 

當時我也是這麼想的(⊙﹏⊙)，但事實真的是這樣嗎？下面咱們來看一些測試結果。

安卓4.2.1－qq瀏覽器，測試結果以下：

如圖所示，輸入框不見了。。。

 

再看看ios的safari：

爲什麼又多了條白帶？

還有，收起鍵盤後，爲啥頁面下移了。。。

好吧，其實這只是問題的冰山一角。

進入正題，怎麼才能解決這些問題呢？

咱們能夠先從虛擬鍵盤入手，看看是否能夠監聽到呼出鍵盤、收回鍵盤這兩個事件。

部分瀏覽器能夠經過捕捉resize事件知道是否呼出收起虛擬鍵盤。

測試頁：  http://backtonaturedemo.github.io/frontend/case/keyborad/resize.html

下面是測試的結果：

 

iPhone 5s iOS 8.2 ： 

（n表示不能觸發resize事件，y表示能觸發resize事件）

注意： ios的UC瀏覽器中，點擊fixed定位的輸入框，呼出鍵盤後沒法輸入。

 

Coolpad8720Q Andorid 4.2.1

 

那麼監聽focus和blur事件又如何呢？

 

測試頁：  http://backtonaturedemo.github.io/frontend/case/keyborad/focusblur.html

 

用上述兩臺機器繼續測試，結論以下：

1. ios和安卓點擊輸入框都會觸發focus事件
2. ios的全部瀏覽器點擊虛擬鍵盤的「完成「鍵或者其餘方式收起鍵盤都會觸發blur事件
3. 安卓手機在點擊」收起按鈕「或者其餘操做收起鍵盤的時候，沒有觸發blur事件，焦點仍是在輸入框上。

下面爲測試截圖

 

 

因此，能夠採起以下方案作web評論發表框

 

示例頁面:  http://backtonaturedemo.github.io/frontend/case/keyborad/demo1.html

 

1.  除評論框之外的元素都放在一個父元素，這裏父元素是main。

1 <div class="main">
2      <img src="http://backtonaturedemo.github.io/frontend/case/keyborad/test.png" alt="">
3      <img src="http://backtonaturedemo.github.io/frontend/case/keyborad/test1.png" alt="">
4 </div>

2. 評論框和發佈按鈕放在一個div裏

1 <div class="comment">
2     <div class="buttons">
3         <button class="sure cell">發表</button>
4         <button class="cancel cell">取消</button>
5     </div>
6     <textarea class="input" placeholder="我來講兩句"></textarea>
7 </div>

注意： 須要在呼出鍵盤前，紀錄下頁面滾動條位置。

呼出鍵盤後，隱藏.main（除評論框之外的元素）。

撐高輸入框，取消fixed，加入上外邊距（給發表按鈕留下位置）。

當輸入框blur或點擊取消，還原頁面。