標籤：div webview控制項 view content head lock cti eve log
做過hybrid app的朋友都會使用這樣過這樣的開發模式，app是原生的，裡面的內容是移動web。以安卓為例，安卓app裡面內容會使用一個webview控制項來載入移動web，webview控制項設定了全屏。那麼問題來了，假如是一個表單頁面，裡面有很多的輸入框，點擊最頂部的輸入框的時候，移動端的IME就會擋住最底部的輸入框，無法看到輸入框裡面的內容。
如何解決，請看一下代碼：
<!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>移動端IME擋住輸入框</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> </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); } }); </script></html>
通過js就很輕鬆的解決這個問題。（我開始以為需要app那邊去設定）
解決移動端IME擋住輸入框的辦法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
