做過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那邊去設置）