解决方法：完全解决了移动网页中输入框被输入法阻塞的问题

完全解决了移动网页中输入框被输入法阻塞的问题

更新时间：2017年12月19日14:37:51作者：小魔仙酷

下面的编辑器将分享一篇文章，该文章完全解决了移动网页中的输入框被输入法阻塞的问题。它具有很好的参考价值，希望对大家有所帮助。让我们跟随编辑器看看

在执行弹出对话框之前，填写信息，然后发现在手机上查看信息时，在后面的输入框中填写信息时，输入框已被输入法阻塞，并且只能盲目填写。

前提

1.弹出对话框的显示位置为：固定

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。有输入法时，根据情况使用底部。当输入获得焦点并且窗口重置时（即输入框弹出），请注意首先绑定输入的焦点事件，然后绑定窗口更改事件，因为在手机上，输入获取焦点，并弹出输入框，导致窗口大小更改。

在发生窗口大小更改事件之后，确定输入框是否被覆盖（即不在窗口的可见范围内）。使用的方法是使用可见窗口的高度（$（window）.height（））大于输入框的底部（input.offset（）。top + input.offset（）。height-document。 body.scrollTop），因为input.offset（）。top表示元素从文档开头开始的位置。可视窗口头部的位置可以减去滚动条滚动了多少。上面是确定该元素是否在可见窗口的底部。

以上文章完美地解决了移动网页上的输入框被输入法所阻塞，即编辑器共享的所有内容的问题，希望为您提供参考，并希望可以支持Scripthome。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-321282-1.html