问题:在移动端火狐浏览下,输入框键盘遮挡住
解决方案:
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.οnlοad=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>