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

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

前提

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)

相关推荐

  • Android软键盘挡住输入框的终极解决方案

    Android软键盘挡住输入框的终极解决方案

    前言 开发做得久了,总免不了会遇到各种坑. 而在Android开发的路上,『软键盘挡住了输入框』这个坑,可谓是一个旷日持久的巨坑--来来来,我们慢慢看. 入门篇 最基本的情况,如图所示:在页面底部有一个EditText,如果不做任何处理,那么在软键盘弹出的时候,就有可能会挡住EditText. 对于这种情况的处理其实很简单,只需要在AndroidManifest文件中对activity设置:android:windowSoftInputMode的值adjustPan或者adjustResize即

  • IOS 键盘挡住输入框的问题解决办法

    IOS 键盘挡住输入框的问题解决办法 在iOS开发发现一个问题,有时输入框位于低出时,当编辑输入时,弹出的键盘会挡住输入框,令用户看不清楚实时的输入情况,使界面交互极度不友好. 经过查资料终于解决了这个问题. 解决思路: 1. 输入框监听UIControlEventEditingDidBegin事件,当用户开始输入时,将整个view上移. 2. 输入框监听UIControlEventEditingDidEnd事件,当用户结束输入时,将整个view下移,恢复到原位置. 输入框监听事件: [text

  • 移动端固定输入框在底部会被键盘遮挡的解决方法(必看篇)

    移动端固定输入框在底部会被键盘遮挡的解决方法(必看篇)

    由于公司需求,需要做一个实时对话的聊天功能.遇到各种小坑就不多说了,下面就记录一下遇到最坑的一个问题.. 页面布局写完后,在安卓和苹果手机测试了一下,问题来了!!!在安卓手机中布局完美展示(这很好),但在苹果手机下,经常点击输入框键盘会把输入框挡住. 如下图显示: 图一 图二 图三 (图一和图二都是有问题的,图三才是想要的效果.) 每次键盘遮挡住输入框之后,必须要手动向上滑动一下屏幕才显示出来,这体验效果就很不好了吧.然后自己就尝试了各种方法,什么定时器.绝对定位.固定定位.计算屏幕高度再定位等

  • js解决软键盘遮挡输入框的问题分享

    js解决软键盘遮挡输入框的问题分享

    经验须知 弹出软键盘时: ios端$('body').scrollTop()会改变 android端$(window).height()会改变 拉起键盘不是一瞬间,而是有一个缓动过程 问题重现 ios端,经常会出现输入法遮挡输入框的问题(特别是那种有一个白色顶部的输入法,如:百度输入法),如图: 问题解决 我们只需要在输入框聚焦之后,开启一个定时器,执行$('body').scrollTop(1000000),这样由于整个body滚动到了最下面,输入框自然就看见了,具体请查看以下示例 示例源码

  • 解决移动端 ios 系统键盘遮挡的问题

    亲测 ios 9 ,ios10 系统有效,其他请自行测试,建议通过判断系统类型来动态引入此脚本 var isIPHONE = navigator.userAgent.toUpperCase().indexOf("IPHONE")!= -1; if(isIPHONE){ // 元素失去焦点隐藏iphone的软键盘 function objBlur(obj,time){ var startTime=0,endTime=0, time = !time?30:time, docTouchend

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

    之前要做一个弹出对话框,填写信息,发现在手机上看的时候,较后的输入框在填写信息时,输入框被输入法遮挡,只能盲填. 前提 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%; }

  • 完美解决手机浏览器顶部下拉出现网页源或刷新的问题

    完美解决手机浏览器顶部下拉出现网页源或刷新的问题

    问题如下图所示: 一般处理此类问题都会有一个属性:"event.preventDefault()",但是如果直接使用会导致页面的内部滚动也失效导致不能滚动,我所处理的方式也与其类似. 因为滑动区域是向走的,所以滑动块的顶部到浏览器顶部的距离最大为0(其余为负值[$('#bodycthead').offset().top]),当为0的时候说明已经回到了顶部,继续向下拉动的时候就不应该有反应,可以禁止默认滑动,而向上拉动的时候应该取消默认的滑动,所以应该将"event.preve

  • 解决ios h5 input输入框被输入法弹出一块区域的问题

    问题:如下图 解决方案 scrollIntoView scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶部与元素顶部平齐 /** * * 使用方法 输入框中 onclick="sr(this);" onblur="nosr(this)" */ var timer1; function sr(obj) { timer1 =

  • 完美解决node.js中使用https请求报CERT_UNTRUSTED的问题

    只要调用了没有受信的https就会报错:CERT_UNTRUSTED 简单的解决方法就是设置环境变量回避非授信证书的问题. 只要在请求的代码之前加上如下代码即可: process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0"; 结束!!! 以上就是小编为大家带来的完美解决node.js中使用https请求报CERT_UNTRUSTED的问题全部内容了,希望大家多多支持我们~

  • 完美解决Thinkphp3.2中插入相同数据的问题

    完美解决Thinkphp3.2中插入相同数据的问题

    问题描述 今天在使用TP3.2插入数据的时候,为了避免插入相同的数据(所谓相同的数据,其主键相同或者是唯一索引的字段相同),我创建的索引如下图,主键索引为自增字段,不可能出现重复,即唯一索引可能会出现重复,我希望的是uid,year,mounth,day 这三个字段出现相同的话,就更新当前记录. 问题解决办法 在之前面对这样的问题的时候,我们知道,MySQL提供了ON DUPLICATE KEY UPDATE或者REPLACE INTO来解决. 使用ON DUPLICATE KEY UPDATE

  • 完美解决在Servlet中出现一个输出中文乱码的问题

    如下所示: 在Servlet中出现一个输出中文乱码的问题,已经解. @Override public void doPost(HttpServletRequest reqeust, HttpServletResponse response) throws ServletException, IOException { //PrintWriter out = response.getWriter();在还没有给response指定编码格式时就获取了他的输出流,所以一直乱码 reqeust.setC

  • 完美解决在oj中Python的循环输入问题

    完美解决在oj中Python的循环输入问题 这几天做题被python的循环输入问题给烦死了,好好查了一下,记录在此. while True: t= sys.stdin.readline().strip() if len(t)==0: #判断是否为空串 ,使用t==""也可以 break t= int(t) nums=[int(i) for i in sys.stdin.readline().strip().split(' ')] res = getDiff(t,nums) print

  • 完美解决Django2.0中models下的ForeignKey()问题

    Django2.0中编写models类下的ForeignKey book = models.ForeignKey('BookInfo') django2.0与之前的1.8不同, 错误: book = models.ForeignKey('BookInfo') TypeError: __init__() missing 1 required positional argument: 'on_delete' 解决方法: book = models.ForeignKey('BookInfo', on_

  • 完美解决ARIMA模型中plot_acf画不出图的问题

    问题描述:在画时间序列ACF时,调用 from statsmodels.graphics.tsaplots import plot_acf, plot_pacf plot_acf(data, lags=40) plt.show() 画不出图,或者是只能画出一条直线,如下图所示: 出现这种情况的原因是:plot_acf(data, lags=40)中的data没有dropna(). 解决方案: from statsmodels.graphics.tsaplots import plot_acf,

  • 完美解决在ModalPopupExtender中使用CalendarExtender时被层遮挡的问题

    完美解决在ModalPopupExtender中使用CalendarExtender时被层遮挡的问题

    大家可以去官方网站查看demo,ModalPopupExtender控件用来在网页中实现类似于模式对话框的效果,而CalendarExterder控件提供日期输入,它有几个很重要的属性: TargetControlID:日期输入的目标控件ID,一般来说都都是一个文本框. Format:日期格式,如yyyy-MM-dd. PopupButtonID:用户打开日期选择面板的控件ID,如按钮,图片等. PopupPosition:设置日期选择面板打开的位置,这个是相对于TargetControlID所

随机推荐