虛擬鍵盤,移動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 用上述兩台機器繼續測試,結論如下:- ios和安卓點擊輸入框都會觸發focus事件
- ios的所有瀏覽器點擊虛擬鍵盤的“完成“鍵或者其他方式收起鍵盤都會觸發blur事件
- 安卓手機在點擊”收起按鈕“或者其他操作收起鍵盤的時候,沒有觸發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或點擊取消,還原頁面。