1. 程式人生 > >H5移動端彈出鍵盤時遮擋輸入框

H5移動端彈出鍵盤時遮擋輸入框

記一次,解決移動端文字框彈出鍵盤遮擋輸入框的方法:
 
document.activeElement.scrollIntoViewIfNeeded();
 
方法用來將不在瀏覽器視窗的可見區域內的元素滾動到瀏覽器視窗的可見區域。 如果該元素已經在瀏覽器視窗的可見區域內,則不會發生滾動。 
 
使用方法:
 
var input= document.getElementById("input");
 
input.scrollIntoViewIfNeeded();
 
等同於input.scrollIntoViewIfNeeded(true);
 
如果為true,則元素將在其所在滾動區的可視區域中居中對齊。
如果為false,則元素將與其所在滾動區的可視區域最近的邊緣對齊。 根據可見區域最靠近元素的哪個邊緣,元素的頂部將與可見區域的頂部邊緣對準,或者元素的底部邊緣將與可見區域的底部邊緣對準。
 
延時一定時間重新定位輸入框。
點選輸入框時加長body元素高度到9999px(當然不一定非要這麼高),頁面滾動到空白區域,再生成輸入框新增在當前一屏頁面的最頂端。
藉助元素的 scrollIntoViewIfNeeded() 方法。這個方法執行後如果當前元素在視口中不可見,則會滾動瀏覽器視窗或容器元素,最終讓它可見。如果當前元素在視口中已經是可見的,這個方法什麼也不做。
頁面跳轉或者顯示隱藏(無疑是最簡單的,但是可能不能滿足產品的要求,或者有點low,但是網頁版的微博就是如此)。