先通過一個(gè)頁面看下事情的來龍去脈，頁面如下所示：

這個(gè)頁面剛好一屏幕大小，所以沒有滾動(dòng)條，因?yàn)椤氨４妗辨I上面那個(gè)項(xiàng)目備注是需要用戶去填寫的，當(dāng)他點(diǎn)擊后就會(huì)出現(xiàn)虛擬鍵盤，但安卓手機(jī)彈出鍵盤會(huì)遮住這個(gè)輸入框，以至于用戶看不見了。蘋果手機(jī)天然不會(huì)喔，蘋果手機(jī)的鍵盤彈出來是占了下面的位置，從而把頁面推了上去，整個(gè)頁面就縮小了就不會(huì)出現(xiàn)這樣的情況。安卓手機(jī)情況如下圖：

我不停嘗試去解決這個(gè)問題，但最終都不成功。

思考一：

如果能模仿蘋果一樣，當(dāng)鍵盤彈出來的時(shí)候，將整個(gè)頁面縮小成頁面底部剛好貼著鍵盤，那就完美了。但是這個(gè)想法最大的問題就是，不能準(zhǔn)確拿到虛擬鍵盤的高度(后來測(cè)試時(shí)發(fā)現(xiàn)，虛擬鍵盤原來還可以改變大小……所以這個(gè)高度更不可能拿到了……)，但即使拿到高度，能完成當(dāng)備注那個(gè)textarea onfocus時(shí)，鍵盤彈出并準(zhǔn)確計(jì)算成整個(gè)頁面縮小成頁面底部剛好貼著鍵盤這個(gè)效果，還有一個(gè)最終大坑！就是沒有辦法監(jiān)聽到虛擬鍵盤什么時(shí)候被用戶收起來！這樣一來就不知道什么時(shí)候去還原這個(gè)頁面了……雖然onblur事件可以在失去焦點(diǎn)時(shí)去還原這個(gè)頁面，但安卓用戶的習(xí)慣操作應(yīng)該是按手機(jī)上的物理返回鍵或者虛擬鍵盤上的那個(gè)收起鍵盤的按鈕，問題是無論返回還是收起鍵盤，焦點(diǎn)還是在那里，沒有失去呀，這就沒辦法了……所以最終的問題關(guān)鍵是，怎樣監(jiān)聽到虛擬鍵盤……

思考二：

嘗試了一個(gè)方法效果已經(jīng)很接近了。代碼如下：

<div id="fix-hegiht" style="height: 300px; width: 100%; display: none;"></div>

其實(shí)就是在文本框onfocus時(shí)，把上面這個(gè)空白高度的div顯示出來，于是就能把頁面撐高，就會(huì)出現(xiàn)滾動(dòng)條，效果挺好如下圖：

而且收鍵盤后，竟然頁面會(huì)回到頂部(我懷疑觸發(fā)了resize事件，但經(jīng)測(cè)試，無論鍵盤彈出收起都沒觸發(fā)哎，遺憾)，這不就是想要的效果了嗎！如下圖：

會(huì)發(fā)現(xiàn)雖然回到了頂部，看起來好像跟一開始沒有滾動(dòng)條的樣子一樣，但現(xiàn)在用戶是可以滾動(dòng)的，因?yàn)槟莻€(gè)負(fù)責(zé)撐高的空div仍然在那里，如果用戶滾下去就會(huì)看到一大片空白，這肯定是要處理掉的。于是問題又到了“什么時(shí)候去刪了這個(gè)空div”？最好的當(dāng)然是能監(jiān)聽到鍵盤什么時(shí)候被收起來啦，但這個(gè)似乎不太可能。于是我想，能不能當(dāng)滾動(dòng)條滾動(dòng)到空div的地方就把它刪了。確實(shí)可以這樣子，但體驗(yàn)不好啊，突然就閃了一下，而且，如果當(dāng)用戶彈出鍵盤時(shí)去操作可以滾動(dòng)的頁面，滾到空div的地方就刪了這個(gè)div，那瞬間輸入框又被蓋住了……

我還想，能不能滾動(dòng)條滾到空div的地方，就不能往下滾了呢？如果這樣，用戶滾不下去，那留著這個(gè)空白div也沒問題啊。但是這個(gè)想法卻實(shí)現(xiàn)不了，搞來搞去沒辦法搞出來。

思路三：

我就想這個(gè)虛擬鍵盤擋住輸入框的問題應(yīng)該到處可見啊，各種注冊(cè)頁面估計(jì)都有，那怎么會(huì)這么多年來都用安卓的我竟然沒覺得這是個(gè)問題??？于是我跑去隨便找一個(gè)注冊(cè)頁面(如搜狐郵箱)http://wap.mail.sohu.com/，截圖如下：

竟然可以??？整個(gè)頁面往上挪了一點(diǎn)，但沒出現(xiàn)滾動(dòng)條??！這究竟是怎么做到的?。?？？我就奇怪是不是瀏覽器問題，因?yàn)檫@個(gè)是手機(jī)自帶的瀏覽器訪問的。于是我開微信，然后點(diǎn)開這個(gè)網(wǎng)站，果然如下圖：

原來是微信的瀏覽器就會(huì)這樣子……最后跑去QQ瀏覽器那里看，也有人問這個(gè)問題，估計(jì)是X5內(nèi)核升級(jí)之后的BUG……最后為了能使用，還是將就使用空白div撐高的方法。在尋找解決方法的過程中，還發(fā)現(xiàn)有段很漂亮的代碼。來自http://efe.baidu.com/blog/mobile-fixed-layout/ 也許以后會(huì)用上，可以用來判斷滾動(dòng)條是否到某個(gè)位置，還有滑動(dòng)的方向，以此來判斷什么時(shí)候阻止?jié)L動(dòng)條滾動(dòng)。代碼已經(jīng)過詳細(xì)注釋：

<script type="text/javascript"> 
// 防止內(nèi)容區(qū)域滾到底后引起頁面整體的滾動(dòng) 
var content = document.querySelector('main'); 
var startY; 
content.addEventListener('touchstart', function (e) { 
//起始位置 
startY = e.touches[0].clientY; 
}); 
content.addEventListener('touchmove', function (e) { 
// 高位表示向上滾動(dòng) 
// 底位表示向下滾動(dòng) 
// 1容許 0禁止 
var status = '11'; 
var ele = this; 
//當(dāng)前位置 
var currentY = e.touches[0].clientY; 
//如果垂直偏移量scrollTop為0，說明要么內(nèi)容小于容器沒有滾動(dòng)條，要么大于容器但滾動(dòng)條在頂部 
if (ele.scrollTop === 0) { 
// 如果內(nèi)容小于容器則同時(shí)禁止上下滾動(dòng)，若大于則可以向下滾動(dòng) 
status = ele.offsetHeight >= ele.scrollHeight ? '00' : '01'; 
} else if (ele.scrollTop + ele.offsetHeight >= ele.scrollHeight) { 
/* 
1.垂直偏移量scrollTop+整個(gè)元素的尺寸offsetHeight(包括邊框)=整個(gè)內(nèi)容區(qū)域scrollHeight 
證明已經(jīng)滾到底部了只能向上滾動(dòng)； 
2.其中offsetHeight(包括邊框)是否要換成clientHeight(不包括邊框)？ 
*/ 
status = '10'; 
} 
//若status==11則上面三種情況都不是，這種情況是有滾動(dòng)條且滾動(dòng)條不在頂部也不在底部 
if (status != '11') { 
// 判斷當(dāng)前的滾動(dòng)方向 
var direction = currentY - startY > 0 ? '10' : '01'; 
/* 
1.操作方向和當(dāng)前允許狀態(tài)求與運(yùn)算，運(yùn)算結(jié)果為0，就說明不允許該方向滾動(dòng)，則禁止默認(rèn)事件，阻止?jié)L動(dòng) 
2.status為00，說明沒有滾動(dòng)條，此時(shí)無論direction是上還是下，都要阻止?jié)L動(dòng) 
3.status為01，說明有滾動(dòng)條，可以向下滾動(dòng)，此時(shí)direction為01則符合向下滾動(dòng) 
4.status為10，說明有滾動(dòng)條，可以向上滾動(dòng)，此時(shí)direction為10則符合向上滾動(dòng) 
5.綜上a.沒有滾動(dòng)條 b.滾動(dòng)條在頂部但還向上滾動(dòng) c.滾動(dòng)條在底部但還向下滾動(dòng) 都要阻止?jié)L動(dòng) 
*/ 
if (!(parseInt(status, 2) & parseInt(direction, 2))) { 
stopEvent(e); 
} 
} 
}); 
</script>

這里用到了HTML5的touch事件，分別touch事件有四個(gè)：touchstart、touchmove、touchend、touchcancel。當(dāng)你滑動(dòng)屏幕的時(shí)候，他們的觸發(fā)順序是：

touchstart：當(dāng)手指接觸屏幕時(shí)觸發(fā)

touchmove：當(dāng)已經(jīng)接觸屏幕的手指開始移動(dòng)后觸發(fā)

touchend：當(dāng)手指離開屏幕時(shí)觸發(fā)

touchcancel：當(dāng)某種touch事件非正常結(jié)束時(shí)觸發(fā)

所以可以通過上圖這些屬性去獲取touch時(shí)的位置。

以上內(nèi)容給大家介紹了安卓輸入框被虛擬鍵盤擋住的問題(微信開發(fā))，希望對(duì)大家有所幫助！

最新評(píng)論