標籤：content var dev client doc back 輸入 viewport imu
問題：在移動端Firefox瀏覽下，輸入框鍵盤遮擋住
解決方案：
? 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>移動端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 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>
移動端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
