成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

虛擬鍵盤，移動web開發(fā)的痛

SunZhaopeng / 1512人閱讀

摘要：原生的彈出虛擬鍵盤和收回虛擬鍵盤，輸入框始終貼在虛擬鍵盤的上方。進入正題，怎么才能解決這些問題呢我們可以先從虛擬鍵盤入手，看看是否可以監(jiān)聽到呼出鍵盤收回鍵盤這兩個事件。部分瀏覽器可以通過捕捉事件知道是否呼出收起虛擬鍵盤。

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

如果移動端web也想做類似的功能，可以實現(xiàn)嗎？
你可能會說著：“不就是放一個position: fixed;的輸入框在頁面底部嘛，有什么好難的？!”
當(dāng)時我也是這么想的(⊙﹏⊙)，但事實真的是這樣嗎？下面我們來看一些測試結(jié)果。
安卓4.2.1－qq瀏覽器，測試結(jié)果如下：

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

再看看ios的safari：

為何又多了條白帶？
還有，收起鍵盤后，為啥頁面下移了。。。
好吧，其實這只是問題的冰山一角。
進入正題，怎么才能解決這些問題呢？
我們可以先從虛擬鍵盤入手，看看是否可以監(jiān)聽到呼出鍵盤、收回鍵盤這兩個事件。
部分瀏覽器可以通過捕捉resize事件知道是否呼出收起虛擬鍵盤。
測試頁： http://backtonaturedemo.github.io/frontend/case/keyborad/resize.html
下面是測試的結(jié)果

iPhone 5s iOS 8.2 ：
（n表示不能觸發(fā)resize事件，y表示能觸發(fā)resize事件）

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

Coolpad8720Q Andorid 4.2.1

那么監(jiān)聽focus和blur事件又如何呢？

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

用上述兩臺機器繼續(xù)測試，結(jié)論如下：

ios和安卓點擊輸入框都會觸發(fā)focus事件

ios的所有瀏覽器點擊虛擬鍵盤的“完成“鍵或者其他方式收起鍵盤都會觸發(fā)blur事件

安卓手機在點擊”收起按鈕“或者其他操作收起鍵盤的時候，沒有觸發(fā)blur事件，焦點還是在輸入框上。
下面為測試截圖


所以，可以采取如下方案做web評論發(fā)表框

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

除評論框以外的元素都放在一個父元素，這里父元素是main。

評論框和發(fā)布按鈕放在一個div里

呼出鍵盤后，隱藏.main（除評論框以外的元素)

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

當(dāng)輸入框blur或點擊取消，還原頁面

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/49749.html

相關(guān)文章

  • 虛擬鍵盤，移動web開發(fā)的痛

    摘要：原生的彈出虛擬鍵盤和收回虛擬鍵盤，輸入框始終貼在虛擬鍵盤的上方。進入正題，怎么才能解決這些問題呢我們可以先從虛擬鍵盤入手，看看是否可以監(jiān)聽到呼出鍵盤收回鍵盤這兩個事件。部分瀏覽器可以通過捕捉事件知道是否呼出收起虛擬鍵盤。 原生APP的彈出虛擬鍵盤和收回虛擬鍵盤，輸入框始終貼在虛擬鍵盤的上方。如下圖： showImg(https://segmentfault.com/img/remote...

    kbyyd24 評論0 收藏0

  • 虛擬鍵盤，移動web開發(fā)的痛

    摘要：原生的彈出虛擬鍵盤和收回虛擬鍵盤，輸入框始終貼在虛擬鍵盤的上方。進入正題，怎么才能解決這些問題呢我們可以先從虛擬鍵盤入手，看看是否可以監(jiān)聽到呼出鍵盤收回鍵盤這兩個事件。部分瀏覽器可以通過捕捉事件知道是否呼出收起虛擬鍵盤。 原生APP的彈出虛擬鍵盤和收回虛擬鍵盤，輸入框始終貼在虛擬鍵盤的上方。如下圖： showImg(https://segmentfault.com/img/remote...

    gotham 評論0 收藏0

  • 一個神器，讓寫東西快得飛起

    摘要：精準(zhǔn)截圖不再需要細調(diào)截圖框這一細節(jié)功能真心值無數(shù)個贊相比大多數(shù)截屏軟件只能檢測整個應(yīng)用窗口邊界，對界面元素的判定讓你操作時可以更加精準(zhǔn)快捷，下面的動圖就可以讓你直觀地感受到這個功能的強大之處。接著打開截屏的現(xiàn)象，將里面的顯示邊框?qū)挾日{(diào)整為。 ...

    Dionysus_go 評論0 收藏0

  • 總結(jié)移動開發(fā)實踐中遇到的坑

    摘要：博主之前已經(jīng)推薦了一款神器下面，就總結(jié)一下移動端遇見的坑。解決原理虛擬鍵盤彈出時將元素設(shè)置為，虛擬鍵盤消失時候設(shè)置回來。解決方案由于虛擬鍵盤出現(xiàn)并未拋出事件，而檢測或者事件，皆會有一定延遲，會出現(xiàn)閃爍現(xiàn)象。 做過很多移動端的項目，在開發(fā)調(diào)試過程中，一款好的調(diào)試工具會讓效率大大提高。博主之前已經(jīng)推薦了一款神器：http://web.jobbole.com/87587/ 下面，就總結(jié)一下移...

    rockswang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<