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


Posted in Javascript onDecember 19, 2017

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

前提

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

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

Javascript 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
js查找父节点的简单方法
Jun 28 Javascript
Js动态创建div
Sep 25 Javascript
一个JQuery写的点击上下滚动的小例子
Aug 27 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
微信小程序支付PHP代码
Aug 23 Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 #Javascript
Angular2实现组件交互的方法分析
Dec 19 #Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 #Javascript
jquery自定义显示消息数量
Dec 19 #jQuery
基于Vue开发数字输入框组件
Dec 19 #Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 #jQuery
从setTimeout看js函数执行过程
Dec 19 #Javascript
You might like
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
PHP与已存在的Java应用程序集成
2006/10/09 PHP
让PHP支持页面回退的两种方法[转]
2007/02/14 PHP
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
详解Python的Django框架中的模版继承
2015/07/16 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
意大利网上药房:Farmacia 33
2020/01/27 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
学前班评语大全
2014/05/04 职场文书
奉献演讲稿范文
2014/05/21 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
消防宣传标语大全
2015/08/03 职场文书
值班管理制度范本
2015/08/06 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android