再更一次2016/4/20 10:23 今早還看到 有朋友在“微信里面的瀏覽器在?s7?edge?上?鍵盤(pán)覆蓋網(wǎng)頁(yè)上表單?，表單不會(huì)自動(dòng)向上移動(dòng)，導(dǎo)致無(wú)法看著輸 ”今早在騰訊瀏覽器的群里問(wèn)這事情，估計(jì)有一部分機(jī)子還沒(méi)修復(fù)這個(gè)BUG……額，這個(gè)問(wèn)題騰訊瀏覽器不修復(fù)自己很難完美地搞好，所以還是坐等他修復(fù)吧。昨晚微信瀏覽器(也就是QQ瀏覽器的內(nèi)核)已經(jīng)100%靜默升級(jí)到Blink內(nèi)核，我們可以使用他的“微信WEB開(kāi)發(fā)者工具”來(lái)試試這個(gè)問(wèn)題看他是怎樣解決這個(gè)BUG的。 ? 點(diǎn)擊文本框彈出虛擬鍵盤(pán)變成---》 可以看到，正常的處理是，彈出的虛擬鍵盤(pán)直接占了下面的位置，整個(gè)body縮小，由原來(lái)的567變成現(xiàn)在的445。而且你可以去改變虛擬鍵盤(pán)的大小，照樣能適應(yīng)。 所以，大家還是坐等騰訊去徹底修復(fù)這個(gè)BUG吧，我們根本沒(méi)辦法監(jiān)聽(tīng)虛擬鍵盤(pán)。
? ?? ---------------------------------------------------------一更分割線(xiàn)----------------------------------------------------------------------- ? ? ? 更新于2016/4/18 17:54? 折騰了那么久，突然下午發(fā)現(xiàn)，神奇的完美解決啦！還以為自己代碼神奇……原來(lái)是QQ瀏覽器已經(jīng)修復(fù)了這個(gè)BUG…… ----------------------------------------------------------以下是原文----------------------------------------------------------------------
是這樣的，現(xiàn)在有一個(gè)這樣的頁(yè)面： ? ? ? 這個(gè)頁(yè)面剛好一屏幕大小，所以沒(méi)有滾動(dòng)條，因?yàn)椤氨４妗辨I上面那個(gè)項(xiàng)目備注是需要用戶(hù)去填寫(xiě)的，當(dāng)他點(diǎn)擊后就會(huì)出現(xiàn)虛擬鍵盤(pán)，但安卓手機(jī)彈出鍵盤(pán)會(huì)遮住這個(gè)輸入框，以至于用戶(hù)看不見(jiàn)了。蘋(píng)果手機(jī)天然不會(huì)喔，蘋(píng)果手機(jī)的鍵盤(pán)彈出來(lái)是占了下面的位置，從而把頁(yè)面推了上去，整個(gè)頁(yè)面就縮小了就不會(huì)出現(xiàn)這樣的情況。安卓手機(jī)情況如下圖： ? ? ? ? 我不停嘗試去解決這個(gè)問(wèn)題，但最終都不成功。
思考一： ? ? ??如果能模仿蘋(píng)果一樣，當(dāng)鍵盤(pán)彈出來(lái)的時(shí)候，將整個(gè)頁(yè)面縮小成頁(yè)面底部剛好貼著鍵盤(pán)，那就完美了。但是這個(gè)想法最大的問(wèn)題就是，不能準(zhǔn)確拿到虛擬鍵盤(pán)的高度(后來(lái)測(cè)試時(shí)發(fā)現(xiàn)，虛擬鍵盤(pán)原來(lái)還可以改變大小……所以這個(gè)高度更不可能拿到了……)，但即使拿到高度，能完成當(dāng)備注那個(gè)textarea on focus時(shí)，鍵盤(pán)彈出并準(zhǔn)確計(jì)算成 整個(gè)頁(yè)面縮小成頁(yè)面底部剛好貼著鍵盤(pán)這個(gè)效果，還有一個(gè)最終大坑！就是沒(méi)有辦法監(jiān)聽(tīng)到虛擬鍵盤(pán)什么時(shí)候被用戶(hù)收起來(lái)！這樣一來(lái)就不知道什么時(shí)候去還原這個(gè)頁(yè)面了……雖然onblur事件可以在失去焦點(diǎn)時(shí)去還原這個(gè)頁(yè)面，但安卓用戶(hù)的習(xí)慣操作應(yīng)該是按手機(jī)上的物理返回鍵或者虛擬鍵盤(pán)上的那個(gè)收起鍵盤(pán)的按鈕，問(wèn)題是無(wú)論返回還是收起鍵盤(pán)，焦點(diǎn)還是在那里，沒(méi)有失去呀，這就沒(méi)辦法了……所以最終的問(wèn)題關(guān)鍵是，怎樣監(jiān)聽(tīng)到虛擬鍵盤(pán)…… ? ? ??思考二： ? ? ??嘗試了一個(gè)方法效果已經(jīng)很接近了。代碼如下： ? ? ?? <div id="fix-hegiht" style="height: 300px; width: 100%; display: none;"></div> ? ? ??其實(shí)就是在文本框 on focus時(shí)，把上面這個(gè)空白高度的div顯示出來(lái)，于是就能把頁(yè)面撐高，就會(huì)出現(xiàn)滾動(dòng)條，效果挺好如下圖： ? ? ? ?? 而且收鍵盤(pán)后，竟然頁(yè)面會(huì)回到頂部(我懷疑觸發(fā)了resize事件，但經(jīng)測(cè)試，無(wú)論鍵盤(pán)彈出收起都沒(méi)觸發(fā)哎，遺憾)，這不就是想要的效果了嗎！如下圖： ? ? ? 會(huì)發(fā)現(xiàn)雖然回到了頂部，看起來(lái)好像跟一開(kāi)始沒(méi)有滾動(dòng)條的樣子一樣，但現(xiàn)在用戶(hù)是可以滾動(dòng)的，因?yàn)槟莻€(gè)負(fù)責(zé)撐高的空div仍然在那里，如果用戶(hù)滾下去就會(huì)看到一大片空白，這肯定是要處理掉的。于是問(wèn)題又到了“什么時(shí)候去刪了這個(gè)空div”？最好的當(dāng)然是能監(jiān)聽(tīng)到鍵盤(pán)什么時(shí)候被收起來(lái)啦，但這個(gè)似乎不太可能。于是我想，能不能當(dāng)滾動(dòng)條滾動(dòng)到空div的地方就把它刪了。確實(shí)可以這樣子，但體驗(yàn)不好啊，突然就閃了一下，而且，如果當(dāng)用戶(hù)彈出鍵盤(pán)時(shí)去操作可以滾動(dòng)的頁(yè)面，滾到空div的地方就刪了這個(gè)div，那瞬間輸入框又被蓋住了…… ? ? ? 我還想，能不能滾動(dòng)條滾到 空div的地方，就不能往下滾了呢？如果這樣，用戶(hù)滾不下去，那留著這個(gè)空白div也沒(méi)問(wèn)題啊。但是這個(gè)想法卻實(shí)現(xiàn)不了，搞來(lái)搞去沒(méi)辦法搞出來(lái)。 ? ? ??思路三： ? ? ??我就想這個(gè)虛擬鍵盤(pán)擋住輸入框的問(wèn)題應(yīng)該到處可見(jiàn)啊，各種注冊(cè)頁(yè)面估計(jì)都有，那怎么會(huì)這么多年來(lái)都用安卓的我竟然沒(méi)覺(jué)得這是個(gè)問(wèn)題！？于是我跑去隨便找一個(gè)注冊(cè)頁(yè)面(如搜狐郵箱) http://wap.mail.sohu.com/，截圖如下： 竟然可以！？整個(gè)頁(yè)面往上挪了一點(diǎn)，但沒(méi)出現(xiàn)滾動(dòng)條！！這究竟是怎么做到的！！？？我就奇怪是不是瀏覽器問(wèn)題，因?yàn)檫@個(gè)是手機(jī)自帶的瀏覽器訪(fǎng)問(wèn)的。于是我開(kāi)微信，然后點(diǎn)開(kāi)這個(gè)網(wǎng)站，果然如下圖： 原來(lái)是微信的瀏覽器就會(huì)這樣子……最后跑去QQ瀏覽器那里看，也有人問(wèn)這個(gè)問(wèn)題，估計(jì)是X5內(nèi)核升級(jí)之后的BUG……最后為了能使用，還是將就使用空白div撐高的方法。在尋找解決方法的過(guò)程中，還發(fā)現(xiàn)有段很漂亮的代碼。來(lái)自http://efe.baidu.com/blog/mobile-fixed-layout/ ? 也許以后會(huì)用上，可以用來(lái)判斷滾動(dòng)條是否到某個(gè)位置，還有滑動(dòng)的方向，以此來(lái)判斷什么時(shí)候阻止?jié)L動(dòng)條滾動(dòng)。代碼已經(jīng)過(guò)詳細(xì)注釋：

<script type= "text/javascript">

// 防止內(nèi)容區(qū)域滾到底后引起頁(yè)面整體的滾動(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，說(shuō)明要么內(nèi)容小于容器沒(mé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，就說(shuō)明不允許該方向滾動(dòng)，則禁止默認(rèn)事件，阻止?jié)L動(dòng)

2.status為00，說(shuō)明沒(méi)有滾動(dòng)條，此時(shí)無(wú)論direction是上還是下，都要阻止?jié)L動(dòng)

3.status為01，說(shuō)明有滾動(dòng)條，可以向下滾動(dòng)，此時(shí)direction為01則符合向下滾動(dòng)

4.status為10，說(shuō)明有滾動(dòng)條，可以向上滾動(dòng)，此時(shí)direction為10則符合向上滾動(dòng)

5.綜上a.沒(méi)有滾動(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)接觸屏幕的手指開(kāi)始移動(dòng)后觸發(fā) ? ? ? touchend：當(dāng)手指離開(kāi)屏幕時(shí)觸發(fā) ? ? ? touchcancel：當(dāng)某種touch事件非正常結(jié)束時(shí)觸發(fā) 所以可以通過(guò)上圖這些屬性去獲取touch時(shí)的位置。

總結(jié)

以上是生活随笔為你收集整理的微信开发安卓虚拟键盘挡住输入框的问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。