手机网页中输入框被输入法遮挡问题

之前要做一个弹出对话框，填写信息，发现在手机上看的时候，较后的输入框在填写信息时，输入框被输入法遮挡，只能盲填。

前提

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%;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 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();

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

思路解析

简单点说就是改变对话框的定位方式，在默认情况下用top，在有输入法的时候，根据情况用bottom。 
在input获取焦点且窗口重设的时候（即输入框弹出），注意先绑定input的focus事件，再绑定窗口改变的事件，因为在手机上，是input获取焦点，输入框才弹出导致窗口大小改变。 
再窗口大小改变事件发生之后，判断输入框是否被遮（即不在窗口的可视范围内），采用的办法是用可视窗口的高度（$(window).height()）是否大于输入框的底部（input.offset().top+input.offset().height-document.body.scrollTop）因为input.offset().top表示的是元素离文档头部的位置，要算元素离可视窗口头部的位置，可以再减去滚动条滚动了多少。以上是判断元素是否在可视窗口底部。