今天遇到了乙個問題，在安卓手機上，當我要點選輸入「店鋪名稱」時，手機軟鍵盤彈出來剛好把輸入框擋住了；擋住就算了，關鍵是頁面還不能向上滑動，整個手機視窗被壓為原來的二分之一左右；
然後找了一些方案，不過不大適用，或者是有點麻煩；所以需要整合一下，
首先，我想一下我要實現的效果
如圖，當手機鍵盤出現時，頁面是可以自由滾動的，而且當前聚焦的輸入框往紅線處靠齊，這樣就剛好在剩下的視窗的垂直正中間，這樣就不會出現輸入框被擋住，看不到自己輸入的內容了 ；
如下圖所示，黑色框代表螢幕，藍色框代表頁面大小，當螢幕被壓小時，頁面內容必須保持原來的高度：
實現原理，頁面一進來時，我就獲取視窗的高度，給最外層的div設定乙個最小高度，這樣就算視窗壓小了，頁面還能維持原來的高度，可以滾動瀏覽：
let initwindowheight=window.innerheight
let wrapdiv=document.getelementsbyclassname('animated-router-forward-enter-done')[0]
wrapdiv.style.minheight =initwindowheight+'px'
window.onresize=function()
}else if(window.innerheight-initwindowheight<20)
};
function pageinputscroll() , 500);
//由於我們不能直接知道軟鍵盤什麼時候出來，不過軟鍵盤出來的時候視窗高度會縮小，所以我們可以通過監聽視窗大小變化事件來判斷軟鍵盤是否彈出
window.onresize=function()
}else if(window.innerheight-initwindowheight<20)
};}function offset(element) ;
var _position;
getoffset(element, true);
return offest;
// 遞迴獲取 offset, 可以考慮使用 getboundingclientrect
function getoffset(node, init)
_position = window.getcomputedstyle(node)['position'];
// position=static: 繼續遞迴父節點
if (typeof(init) === 'undefined' && _position === 'static')
offest.top = node.offsettop + offest.top - node.scrolltop;
offest.left = node.offsetleft + offest.left - node.scrollleft;
// position = fixed: 獲取值後退出遞迴
if (_position === 'fixed')
getoffset(node.parentnode);
}}export ;
import from '../../util/pageinputscroll'
......
componentdidmount()
offset()方法是使用js實現類似jquery的offset()的乙個方法，參考自：原生js實現offset方法
安卓 全屏模式下鍵盤遮擋底部輸入框
廢話不多說，直接上圖顯示bug,設定鍵盤屬性windowsoftinputmode adjustresize 時，底部的輸入框游標以下部分被遮擋了。查了很多資料，有說必須使用relativelayout的等等說法。一行行 注釋後發現是因為全屏的問題。找到問題就好解決了，貼出大神 侵刪 public ...
手機網頁中輸入框被輸入法遮擋問題
之前要做乙個彈出對話方塊，填寫資訊，發現在手機上看的時候，較後的輸入框在填寫資訊時，輸入框被輸入法遮擋，只能盲填。1.彈出的對話方塊用display fixed定位的 2.對話方塊大小固定 css部分 dlg top與dlg bottom為對話方塊的類，用於確定對話方塊的定位方式 dlg top d...
移動端，input輸入框被手機輸入法解決方案
當介面元素靠下時候的時候，input輸入框會被系統的鍵盤遮擋。我們可以讓介面向上移動一定距離去避免遮擋。money click function 300 基於jquery寫的事件。首先繫結觸發元素 input 框，scrollintoview alignwithtop 屬性滾動瀏覽器視窗或容器元素，...