完美解决手机网页中输入框被输入法遮挡的问题_网页输入框定位 - CSDN文库

16 浏览量更新于2023-05-06 1 收藏 39KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

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

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

填。

前提前提

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表示的是元素离文档头部的位置，要算元素离可视窗口头部的位置，可以再减去滚动条滚动了多少。以上是

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

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

大家多多支持软件开发网。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

weixin_38595356

粉丝: 9
资源: 940

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈