手机网页中输入框被输入法遮挡怎么办？
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了手机网页中输入框被输入法遮挡怎么办？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2037字，纯文字阅读大概需要3分钟。
内容图文
手机网页中输入框被输入法遮挡怎么办？下面小编就为大家分享一篇完美解决手机网页中输入框被输入法遮挡的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧，希望能帮助到大家。之前要做一个弹出对话框，填写信息，发现在手机上看的时候，较后的输入框在填写信息时，输入框被输入法遮挡，只能盲填。
前提
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表示的是元素离文档头部的位置，要算元素离可视窗口头部的位置，可以再减去滚动条滚动了多少。以上是判断元素是否在可视窗口底部。
相关推荐：
js如何解决软键盘遮挡输入框的问题
H5制作虚拟键盘时出现输入框遮挡的情况怎么办？
p总是被select遮挡的解决方法_经验交流
以上就是手机网页中输入框被输入法遮挡怎么办？的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的手机网页中输入框被输入法遮挡怎么办？全部内容，希望文章能够帮你解决手机网页中输入框被输入法遮挡怎么办？所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。