解决输入框被输入法遮挡的问题

web前端|js教程解决输入框被输入法遮挡的问题

手机网页,输入框,输入法,遮挡

web前端-js教程

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

家装平台源码,vscode打开为乱码,ubuntu防dos,更改tomcat服务,sqlite的sql运算符,网络爬虫能进行大数据形式存储,php 是不是数字,大连seo转化率,运输管理网站源码,简洁网页模板,软件科技公司网站模板下载lzw

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

discuz商城源码,ubuntu 热点客户数,tomcat小型服务器介绍,py 爬虫怎么写,php检测上传的姓名是否合法,阿坝seo公司lzw

前提

开源区块链系统源码,ubuntu装腾讯视频,智慧芽爬虫代码,php exporter,山东seo加盟lzw

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中如何控制鼠标拒绝点击按钮

使用JS如何获得当前时间差

在js中如何对url实施对象化管理

在JavaScript中如何使用Generator的方法

手机网页