之前要做一個(gè)彈出對(duì)話框，填寫信息，發(fā)現(xiàn)在手機(jī)上看的時(shí)候，較后的輸入框在填寫信息時(shí)，輸入框被輸入法遮擋，只能盲填。

前提

1.彈出的對(duì)話框用display:fixed定位的

2.對(duì)話框大小固定

解決辦法

css部分

（dlg-top與dlg-bottom為對(duì)話框的類，用于確定對(duì)話框的定位方式）

.dlg-top{
 position: fixed;
 top:100px;
 left:10%;
}
.dlg-bottom{
 position: fixed;
 bottom:0px;
 left:10%;
}

js部分

“deliver-dlg”為對(duì)話框的類

//彈出對(duì)話框時(shí)，綁定的事件
//綁定輸入框獲取焦點(diǎn)事件
$(".deliver-dlg input,.deliver-dlg textarea").focus(function(){
 var input=$(this);
 //在輸入框獲取焦點(diǎn)后，窗口改變的話，執(zhí)行事件
 $(window).resize(function(){
 //判斷當(dāng)前輸入框是否在可視窗口之外（下面）
 if($(window).height()-(input.offset().top+input.offset().height-document.body.scrollTop)<0){
 //對(duì)話框定位方式改為bottom
 $(".deliver-dlg").removeClass("dlg-top").addClass("dlg-bottom");
 }
 else{
 $(".deliver-dlg").removeClass("dlg-bottom").addClass("dlg-top");
 }
 });
});
//取消對(duì)話框時(shí)，取消事件綁定
$(".deliver-dlg input").unbind();
$(".deliver-dlg").removeClass("dlg-bottom").addClass("dlg-top");
$(window).unbind();

思路解析

簡(jiǎn)單點(diǎn)說(shuō)就是改變對(duì)話框的定位方式，在默認(rèn)情況下用top，在有輸入法的時(shí)候，根據(jù)情況用bottom。 在input獲取焦點(diǎn)且窗口重設(shè)的時(shí)候（即輸入框彈出），注意先綁定input的focus事件，再綁定窗口改變的事件，因?yàn)樵谑謾C(jī)上，是input獲取焦點(diǎn)，輸入框才彈出導(dǎo)致窗口大小改變。

再窗口大小改變事件發(fā)生之后，判斷輸入框是否被遮（即不在窗口的可視范圍內(nèi)），采用的辦法是用可視窗口的高度（$(window).height()）是否大于輸入框的底部（input.offset().top+input.offset().height-document.body.scrollTop）因?yàn)閕nput.offset().top表示的是元素離文檔頭部的位置，要算元素離可視窗口頭部的位置，可以再減去滾動(dòng)條滾動(dòng)了多少。以上是判斷元素是否在可視窗口底部。

上面是我整理給大家的，希望今后會(huì)對(duì)大家有幫助。

相關(guān)文章：

在JS中如何控制鼠標(biāo)拒絕點(diǎn)擊按鈕

使用JS如何獲得當(dāng)前時(shí)間差

在js中如何對(duì)url實(shí)施對(duì)象化管理

在JavaScript中如何使用Generator的方法

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com