資訊專欄INFORMATION COLUMN
摘要：原生的彈出虛擬鍵盤(pán)和收回虛擬鍵盤(pán)，輸入框始終貼在虛擬鍵盤(pán)的上方。進(jìn)入正題，怎么才能解決這些問(wèn)題呢我們可以先從虛擬鍵盤(pán)入手，看看是否可以監(jiān)聽(tīng)到呼出鍵盤(pán)收回鍵盤(pán)這兩個(gè)事件。部分瀏覽器可以通過(guò)捕捉事件知道是否呼出收起虛擬鍵盤(pán)。
原生APP的彈出虛擬鍵盤(pán)和收回虛擬鍵盤(pán)，輸入框始終貼在虛擬鍵盤(pán)的上方。如下圖：
如果移動(dòng)端web也想做類似的功能，可以實(shí)現(xiàn)嗎？
你可能會(huì)說(shuō)著：“不就是放一個(gè)position: fixed;的輸入框在頁(yè)面底部嘛，有什么好難的？!”
當(dāng)時(shí)我也是這么想的(⊙﹏⊙)，但事實(shí)真的是這樣嗎？下面我們來(lái)看一些測(cè)試結(jié)果。
安卓4.2.1－qq瀏覽器，測(cè)試結(jié)果如下：
如圖所示，輸入框不見(jiàn)了。。。
再看看ios的safari：
為何又多了條白帶？
還有，收起鍵盤(pán)后，為啥頁(yè)面下移了。。。
好吧，其實(shí)這只是問(wèn)題的冰山一角。
進(jìn)入正題，怎么才能解決這些問(wèn)題呢？
我們可以先從虛擬鍵盤(pán)入手，看看是否可以監(jiān)聽(tīng)到呼出鍵盤(pán)、收回鍵盤(pán)這兩個(gè)事件。
部分瀏覽器可以通過(guò)捕捉resize事件知道是否呼出收起虛擬鍵盤(pán)。
測(cè)試頁(yè)： http://backtonaturedemo.github.io/frontend/case/keyborad/resize.html
下面是測(cè)試的結(jié)果
iPhone 5s iOS 8.2 ：
（n表示不能觸發(fā)resize事件，y表示能觸發(fā)resize事件）
注意： ios的UC瀏覽器中，點(diǎn)擊fixed定位的輸入框，呼出鍵盤(pán)后無(wú)法輸入。
Coolpad8720Q Andorid 4.2.1
那么監(jiān)聽(tīng)focus和blur事件又如何呢？
測(cè)試頁(yè)： http://backtonaturedemo.github.io/frontend/case/keyborad/focusblur.html
用上述兩臺(tái)機(jī)器繼續(xù)測(cè)試，結(jié)論如下：
ios和安卓點(diǎn)擊輸入框都會(huì)觸發(fā)focus事件
ios的所有瀏覽器點(diǎn)擊虛擬鍵盤(pán)的“完成“鍵或者其他方式收起鍵盤(pán)都會(huì)觸發(fā)blur事件
安卓手機(jī)在點(diǎn)擊”收起按鈕“或者其他操作收起鍵盤(pán)的時(shí)候，沒(méi)有觸發(fā)blur事件，焦點(diǎn)還是在輸入框上。
下面為測(cè)試截圖
所以，可以采取如下方案做web評(píng)論發(fā)表框
示例頁(yè)面: http://backtonaturedemo.github.io/frontend/case/keyborad/demo1.html
除評(píng)論框以外的元素都放在一個(gè)父元素，這里父元素是main。
評(píng)論框和發(fā)布按鈕放在一個(gè)div里
呼出鍵盤(pán)后，隱藏.main（除評(píng)論框以外的元素)
撐高輸入框，取消fixed，加入上外邊距（給發(fā)表按鈕留下位置）
當(dāng)輸入框blur或點(diǎn)擊取消，還原頁(yè)面
注意： 需要在呼出鍵盤(pán)前，紀(jì)錄下頁(yè)面滾動(dòng)條位置。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115086.html
摘要：原生的彈出虛擬鍵盤(pán)和收回虛擬鍵盤(pán)，輸入框始終貼在虛擬鍵盤(pán)的上方。進(jìn)入正題，怎么才能解決這些問(wèn)題呢我們可以先從虛擬鍵盤(pán)入手，看看是否可以監(jiān)聽(tīng)到呼出鍵盤(pán)收回鍵盤(pán)這兩個(gè)事件。部分瀏覽器可以通過(guò)捕捉事件知道是否呼出收起虛擬鍵盤(pán)。 原生APP的彈出虛擬鍵盤(pán)和收回虛擬鍵盤(pán)，輸入框始終貼在虛擬鍵盤(pán)的上方。如下圖： showImg(https://segmentfault.com/img/remote...
摘要：原生的彈出虛擬鍵盤(pán)和收回虛擬鍵盤(pán)，輸入框始終貼在虛擬鍵盤(pán)的上方。進(jìn)入正題，怎么才能解決這些問(wèn)題呢我們可以先從虛擬鍵盤(pán)入手，看看是否可以監(jiān)聽(tīng)到呼出鍵盤(pán)收回鍵盤(pán)這兩個(gè)事件。部分瀏覽器可以通過(guò)捕捉事件知道是否呼出收起虛擬鍵盤(pán)。 原生APP的彈出虛擬鍵盤(pán)和收回虛擬鍵盤(pán)，輸入框始終貼在虛擬鍵盤(pán)的上方。如下圖： showImg(https://segmentfault.com/img/remote...
摘要：精準(zhǔn)截圖不再需要細(xì)調(diào)截圖框這一細(xì)節(jié)功能真心值無(wú)數(shù)個(gè)贊相比大多數(shù)截屏軟件只能檢測(cè)整個(gè)應(yīng)用窗口邊界，對(duì)界面元素的判定讓你操作時(shí)可以更加精準(zhǔn)快捷，下面的動(dòng)圖就可以讓你直觀地感受到這個(gè)功能的強(qiáng)大之處。接著打開(kāi)截屏的現(xiàn)象，將里面的顯示邊框?qū)挾日{(diào)整為。 ...
摘要：博主之前已經(jīng)推薦了一款神器下面，就總結(jié)一下移動(dòng)端遇見(jiàn)的坑。解決原理虛擬鍵盤(pán)彈出時(shí)將元素設(shè)置為，虛擬鍵盤(pán)消失時(shí)候設(shè)置回來(lái)。解決方案由于虛擬鍵盤(pán)出現(xiàn)并未拋出事件，而檢測(cè)或者事件，皆會(huì)有一定延遲，會(huì)出現(xiàn)閃爍現(xiàn)象。 做過(guò)很多移動(dòng)端的項(xiàng)目，在開(kāi)發(fā)調(diào)試過(guò)程中，一款好的調(diào)試工具會(huì)讓效率大大提高。博主之前已經(jīng)推薦了一款神器：http://web.jobbole.com/87587/ 下面，就總結(jié)一下移...
閱讀 1294·2019-08-30 12:49
閱讀 3163·2019-08-28 18:14
閱讀 840·2019-08-26 11:38
閱讀 1702·2019-08-23 18:23
閱讀 2840·2019-08-23 17:04
閱讀 522·2019-08-23 16:52
閱讀 4064·2019-08-23 16:43
閱讀 2789·2019-08-23 16:12
