移動端輸入法擋住輸入框
阿新 • • 發佈：2017-11-17
load lin onload ice spa red init event -c
問題：在移動端火狐瀏覽下，輸入框鍵盤遮擋住
解決方案：
? element.scrollIntoView()：讓元素滾動到可視區域
? 參數：true 對象的頂端與當前窗口的頂部對齊
???? false 對象的底端與當前窗口的頂部對齊
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>移動端輸入法擋住輸入框</title> <style> input { width: 100%; line-height: 1.5rem; border: 1px solid red; } .block-fill { height: 500px; } </style> </head> <body> <div id="main"> <div id="value"></div> <!--占位div--><div class="block-fill"></div> <!--需要聚焦--> <input id="input" type="text"></input> </div> </body> <script>
window.onload=function(){
//獲取頁面高度 var clientHeight = document.body.clientHeight; var focusElem = document.getElementById(‘input‘); var valueElem = document.getElementById("value"); //設置監聽聚焦事件 document.body.addEventListener("focus", function(e) { focusElem.scrollIntoView(false); }, true);
//設置監聽窗口變化時間 window.addEventListener("resize", function() valueElem.innerHTML="focues resize:"+document.body.clientHeight+";screenHeight="+clientHeight; if(focusElem && document.body.clientHeight < clientHeight) { //使用scrollIntoView方法來控制輸入框 focusElem.scrollIntoView(false); } });
}
</script>
</html>
移動端輸入法擋住輸入框