做过hybrid app的朋友都会使用这样过这样的开发模式，app是原生的，里面的内容是移动web。以安卓为例，安卓app里面内容会使用一个webview控件来加载移动web，webview控件设置了全屏。那么问题来了，假如是一个表单页面，里面有很多的输入框，点击最顶部的输入框的时候，移动端的输入法就会挡住最底部的输入框，无法看到输入框里面的内容。
解决方案：
<!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--> <div class="block-fill"></div> <!--聚焦（方法一）--> <input id="input" type="text"></input> <!--聚焦（方法二）--> <!--<input id="input" type="text" onfocus="focusInput()"></input>--> </div> </body> <script> //方法一： //获取页面高度 var clientHeight = document.body.clientHeight; //设置监听聚焦事件 document.body.addEventListener("focus", function(e) { var focusElem = document.getElementById('input') }, true); //设置监听窗口变化时间 window.addEventListener("resize", function() { if(focusElem && document.body.clientHeight < clientHeight) { //使用scrollIntoView方法来控制输入框 focusElem.scrollIntoView(false); } }); //方法二： //设置监听聚焦事件，延时滚动屏幕 funtion focusInput(){ setTimeout(function() { document.body.scrollTop=document.body.scrollHeight }, 100) } </script> </html>
通过js就很轻松的解决这个问题。（我开始以为需要app那边去设置）