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

转自：https://www.jb51.net/article/130967.htm

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

前提

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

2.对话框大小固定

解决办法

css部分

（dlg-top与dlg-bottom为对话框的类，用于确定对话框的定位方式）

1 2 3 4 5 6 7 8 9 10

.dlg-top{  position: fixed;  top:100px;  left:10%; } .dlg-bottom{  position: fixed;  bottom:0px;  left:10%; }

js部分

“deliver-dlg”为对话框的类

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

//弹出对话框时，绑定的事件 //绑定输入框获取焦点事件 $(".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表示的是元素离文档头部的位置，要算元素离可视窗口头部的位置，可以再减去滚动条滚动了多少。以上是判断元素是否在可视窗口底部。

 

二方法---转自：https://blog.csdn.net/u010394015/article/details/70915000

今天写了一个登录，但是登录按钮是固定在页面最底部。这种布局下，ios手机上是没问题的，但是在安卓手机上，键盘弹出后，登录按钮会挡住form表单。

原因就是，ios手机在键盘弹出后，页面高度不会发生变化的，但是安卓手机上键盘弹出后，页面高度 = 原始高度- 键盘高度。

原本想的就是根据input输入框的获焦和失焦来判断键盘的弹起与关闭，但是后来发现，有些手机上面的键盘有一个收起的按钮，点击那个按钮会收起键盘，但是不会触发失焦事件。并且在多个input输入框之间来回切换的时候也会有问题。

解决办法：由于无法获取键盘高度，所以只能监听页面高度变化，在发生变化的时候，改变登录按钮的定位方式。将fixed改为static（或者relative）

代码如下：

 

1.  
   var client_h = document.documentElement.clientHeight;
2.  
   $(window).on("resize",function(){
3.  
   var body_h = document.body.scrollHeight;
4.  
   if(body_h < client_h){
5.  
   $(".operate").removeClass("fixed");
6.  
   console.log("小了");
7.  
   }else{
8.  
   console.log("正常");
9.  
   $(".operate").addClass("fixed");
10.  
    }
11.  
    });