完美解决手机网页中输入框被输入法遮挡的问题

完美解决手机网页中输入框被输入法遮挡的问题完美解决手机网页中输入框被输入法遮挡的问题

下面小编就为大家分享一篇完美解决手机网页中输入框被输入法遮挡的问题，具有很好的参考价值，希望对大

家有所帮助。一起跟随小编过来看看吧

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

填。

前提前提

1.弹出的对话框用display:fixed定位的

2.对话框大小固定

left:10%;

}

.dlg-bottom{

position: fixed;

bottom:0px;

left:10%;

}

js部分部分

“deliver-dlg”为对话框的类

//弹出对话框时，绑定的事件

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");

}

});

});

//取消对话框时，取消事件绑定

入框才弹出导致窗口大小改变。

再窗口大小改变事件发生之后，判断输入框是否被遮（即不在窗口的可视范围内），采用的办法是用可视窗口的高度

（$(window).height()）是否大于输入框的底部（input.offset().top+input.offset().height-document.body.scrollTop）因为

input.offset().top表示的是元素离文档头部的位置，要算元素离可视窗口头部的位置，可以再减去滚动条滚动了多少。以上是

判断元素是否在可视窗口底部。

以上这篇完美解决手机网页中输入框被输入法遮挡的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望

大家多多支持我们。