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


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 相关文章推荐
javascript复制对象使用说明
Jun 28 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 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
php下使用curl模拟用户登陆的代码
2010/09/10 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
python自定义异常实例详解
2017/07/11 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
pytorch数据预处理错误的解决
2020/02/20 Python
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
描述RIP和OSPF区别以及特点
2015/01/17 面试题
高中毕业自我鉴定
2013/12/22 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS