移动端输入法挡住输入框
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端输入法挡住输入框相关的知识，希望对你有一定的参考价值。
问题：在移动端火狐浏览下，输入框键盘遮挡住
解决方案：
? 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>
以上是关于移动端输入法挡住输入框的主要内容，如果未能解决你的问题，请参考以下文章