溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
之前要做一個彈出對話框，填寫信息，發現在手機上看的時候，較后的輸入框在填寫信息時，輸入框被輸入法遮擋，只能盲填。
前提
1.彈出的對話框用display:fixed定位的
2.對話框大小固定
解決辦法
css部分
（dlg-top與dlg-bottom為對話框的類，用于確定對話框的定位方式）
.dlg-top{
position: fixed;
top:100px;
left:10%;
}
.dlg-bottom{
position: fixed;
bottom:0px;
left:10%;
}
js部分
“deliver-dlg”為對話框的類
//彈出對話框時，綁定的事件
//綁定輸入框獲取焦點事件
$(".deliver-dlg input,.deliver-dlg textarea").focus(function(){
var input=$(this);
//在輸入框獲取焦點后，窗口改變的話，執行事件
$(window).resize(function(){
//判斷當前輸入框是否在可視窗口之外（下面）
if($(window).height()-(input.offset().top+input.offset().height-document.body.scrollTop)<0){
//對話框定位方式改為bottom
$(".deliver-dlg").removeClass("dlg-top").addClass("dlg-bottom");
}
else{
$(".deliver-dlg").removeClass("dlg-bottom").addClass("dlg-top");
}
});
});
//取消對話框時，取消事件綁定
$(".deliver-dlg input").unbind();
$(".deliver-dlg").removeClass("dlg-bottom").addClass("dlg-top");
$(window).unbind();
思路解析
簡單點說就是改變對話框的定位方式，在默認情況下用top，在有輸入法的時候，根據情況用bottom。 在input獲取焦點且窗口重設的時候（即輸入框彈出），注意先綁定input的focus事件，再綁定窗口改變的事件，因為在手機上，是input獲取焦點，輸入框才彈出導致窗口大小改變。
再窗口大小改變事件發生之后，判斷輸入框是否被遮（即不在窗口的可視范圍內），采用的辦法是用可視窗口的高度（$(window).height()）是否大于輸入框的底部（input.offset().top+input.offset().height-document.body.scrollTop）因為input.offset().top表示的是元素離文檔頭部的位置，要算元素離可視窗口頭部的位置，可以再減去滾動條滾動了多少。以上是判斷元素是否在可視窗口底部。
以上這篇完美解決手機網頁中輸入框被輸入法遮擋的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
