微信開發(fā)安卓虛擬鍵盤擋住輸入框的問題
來源：上善若水丶 發(fā)布時間：2018-06-30 17:17:56 閱讀量：1688
再更一次2016/4/20 10:23 今早還看到有朋友在“微信里面的瀏覽器在 s7 edge 上 鍵盤覆蓋網(wǎng)頁上表單 ，表單不會自動向上移動，導致無法看著輸 ”今早在騰訊瀏覽器的群里問這事情，估計有一部分機子還沒修復這個BUG……額，這個問題騰訊瀏覽器不修復自己很難完美地搞好，所以還是坐等他修復吧。昨晚微信瀏覽器(也就是QQ瀏覽器的內核)已經(jīng)100%靜默升級到Blink內核，我們可以使用他的“微信WEB開發(fā)者工具”來試試這個問題看他是怎樣解決這個BUG的。
點擊文本框彈出虛擬鍵盤變成---》
可以看到，正常的處理是，彈出的虛擬鍵盤直接占了下面的位置，整個body縮小，由原來的567變成現(xiàn)在的445。而且你可以去改變虛擬鍵盤的大小，照樣能適應。
所以，大家還是坐等騰訊去徹底修復這個BUG吧，我們根本沒辦法監(jiān)聽虛擬鍵盤。
所以，大家還是坐等騰訊去徹底修復這個BUG吧，我們根本沒辦法監(jiān)聽虛擬鍵盤。---------------------------------------------------------一更分割線-----------------------------------------------------------------------
更新于2016/4/18 17:54 
折騰了那么久，突然下午發(fā)現(xiàn)，神奇的完美解決啦！還以為自己代碼神奇……原來是QQ瀏覽器已經(jīng)修復了這個BUG……
折騰了那么久，突然下午發(fā)現(xiàn)，神奇的完美解決啦！還以為自己代碼神奇……原來是QQ瀏覽器已經(jīng)修復了這個BUG……----------------------------------------------------------以下是原文----------------------------------------------------------------------
是這樣的，現(xiàn)在有一個這樣的頁面：
這個頁面剛好一屏幕大小，所以沒有滾動條，因為“保存”鍵上面那個項目備注是需要用戶去填寫的，當他點擊后就會出現(xiàn)虛擬鍵盤，但安卓手機彈出鍵盤會遮住這個輸入框，以至于用戶看不見了。蘋果手機天然不會喔，蘋果手機的鍵盤彈出來是占了下面的位置，從而把頁面推了上去，整個頁面就縮小了就不會出現(xiàn)這樣的情況。安卓手機情況如下圖：
我不停嘗試去解決這個問題，但最終都不成功。
思考一：
如果能模仿蘋果一樣，當鍵盤彈出來的時候，將整個頁面縮小成頁面底部剛好貼著鍵盤，那就完美了。但是這個想法最大的問題就是，不能準確拿到虛擬鍵盤的高度(后來測試時發(fā)現(xiàn)，虛擬鍵盤原來還可以改變大小……所以這個高度更不可能拿到了……)，但即使拿到高度，能完成當備注那個textarea onfocus時，鍵盤彈出并準確計算成整個頁面縮小成頁面底部剛好貼著鍵盤這個效果，還有一個最終大坑！就是沒有辦法監(jiān)聽到虛擬鍵盤什么時候被用戶收起來！這樣一來就不知道什么時候去還原這個頁面了……雖然onblur事件可以在失去焦點時去還原這個頁面，但安卓用戶的習慣操作應該是按手機上的物理返回鍵或者虛擬鍵盤上的那個收起鍵盤的按鈕，問題是無論返回還是收起鍵盤，焦點還是在那里，沒有失去呀，這就沒辦法了……所以最終的問題關鍵是，怎樣監(jiān)聽到虛擬鍵盤……
思考二：
嘗試了一個方法效果已經(jīng)很接近了。代碼如下：
<div id="fix-hegiht" style="height: 300px; width: 100%; display: none;"></div>
其實就是在文本框onfocus時，把上面這個空白高度的div顯示出來，于是就能把頁面撐高，就會出現(xiàn)滾動條，效果挺好如下圖：
而且收鍵盤后，竟然頁面會回到頂部(我懷疑觸發(fā)了resize事件，但經(jīng)測試，無論鍵盤彈出收起都沒觸發(fā)哎，遺憾)，這不就是想要的效果了嗎！如下圖：
會發(fā)現(xiàn)雖然回到了頂部，看起來好像跟一開始沒有滾動條的樣子一樣，但現(xiàn)在用戶是可以滾動的，因為那個負責撐高的空div仍然在那里，如果用戶滾下去就會看到一大片空白，這肯定是要處理掉的。于是問題又到了“什么時候去刪了這個空div”？最好的當然是能監(jiān)聽到鍵盤什么時候被收起來啦，但這個似乎不太可能。于是我想，能不能當滾動條滾動到空div的地方就把它刪了。確實可以這樣子，但體驗不好啊，突然就閃了一下，而且，如果當用戶彈出鍵盤時去操作可以滾動的頁面，滾到空div的地方就刪了這個div，那瞬間輸入框又被蓋住了……
我還想，能不能滾動條滾到空div的地方，就不能往下滾了呢？如果這樣，用戶滾不下去，那留著這個空白div也沒問題啊。但是這個想法卻實現(xiàn)不了，搞來搞去沒辦法搞出來。
思路三：
我就想這個虛擬鍵盤擋住輸入框的問題應該到處可見啊，各種注冊頁面估計都有，那怎么會這么多年來都用安卓的我竟然沒覺得這是個問題??？于是我跑去隨便找一個注冊頁面(如搜狐郵箱)http://wap.mail.sohu.com/，截圖如下：
竟然可以??？整個頁面往上挪了一點，但沒出現(xiàn)滾動條！！這究竟是怎么做到的！?。?？我就奇怪是不是瀏覽器問題，因為這個是手機自帶的瀏覽器訪問的。于是我開微信，然后點開這個網(wǎng)站，果然如下圖：
原來是微信的瀏覽器就會這樣子……最后跑去QQ瀏覽器那里看，也有人問這個問題，估計是X5內核升級之后的BUG……最后為了能使用，還是將就使用空白div撐高的方法。在尋找解決方法的過程中，還發(fā)現(xiàn)有段很漂亮的代碼。來自http://efe.baidu.com/blog/mobile-fixed-layout/ 也許以后會用上，可以用來判斷滾動條是否到某個位置，還有滑動的方向，以此來判斷什么時候阻止?jié)L動條滾動。代碼已經(jīng)過詳細注釋：
- <script type="text/javascript">
- // 防止內容區(qū)域滾到底后引起頁面整體的滾動
- var content = document.querySelector('main');
- var startY;
- content.addEventListener('touchstart', function (e) {
- //起始位置
- startY = e.touches[0].clientY;
- });
- content.addEventListener('touchmove', function (e) {
- // 高位表示向上滾動
- // 底位表示向下滾動
- // 1容許 0禁止
- var status = '11';
- var ele = this;
- //當前位置
- var currentY = e.touches[0].clientY;
- //如果垂直偏移量scrollTop為0，說明要么內容小于容器沒有滾動條，要么大于容器但滾動條在頂部
- if (ele.scrollTop === 0) {
- // 如果內容小于容器則同時禁止上下滾動，若大于則可以向下滾動
- status = ele.offsetHeight >= ele.scrollHeight ? '00' : '01';
- } else if (ele.scrollTop + ele.offsetHeight >= ele.scrollHeight) {
- /*
- 1.垂直偏移量scrollTop+整個元素的尺寸offsetHeight(包括邊框)=整個內容區(qū)域scrollHeight
- 證明已經(jīng)滾到底部了只能向上滾動；
- 2.其中offsetHeight(包括邊框)是否要換成clientHeight(不包括邊框)？
- */
- status = '10';
- }
- //若status==11則上面三種情況都不是，這種情況是有滾動條且滾動條不在頂部也不在底部
- if (status != '11') {
- // 判斷當前的滾動方向
- var direction = currentY - startY > 0 ? '10' : '01';
- /*
- 1.操作方向和當前允許狀態(tài)求與運算，運算結果為0，就說明不允許該方向滾動，則禁止默認事件，阻止?jié)L動
- 2.status為00，說明沒有滾動條，此時無論direction是上還是下，都要阻止?jié)L動
- 3.status為01，說明有滾動條，可以向下滾動，此時direction為01則符合向下滾動
- 4.status為10，說明有滾動條，可以向上滾動，此時direction為10則符合向上滾動
- 5.綜上a.沒有滾動條 b.滾動條在頂部但還向上滾動 c.滾動條在底部但還向下滾動 都要阻止?jié)L動
- */
- if (!(parseInt(status, 2) & parseInt(direction, 2))) {
- stopEvent(e);
- }
- }
- });
- </script>
touchstart：當手指接觸屏幕時觸發(fā)
touchmove：當已經(jīng)接觸屏幕的手指開始移動后觸發(fā)
touchend：當手指離開屏幕時觸發(fā)
touchcancel：當某種touch事件非正常結束時觸發(fā)
所以可以通過上圖這些屬性去獲取touch時的位置。
原文地址https://blog.csdn.net/qq_40963664/article/details/80855588
評論：
你還沒有登錄，請先登錄
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
