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


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 相关文章推荐
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
ES6 Array常用扩展的应用实例分析
Jun 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 全文搜索和替换的实现代码
2008/07/29 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
Python中map和列表推导效率比较实例分析
2015/06/17 Python
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
什么是python的自省
2020/06/21 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
介绍信范文
2015/01/31 职场文书
捐款仪式主持词
2015/07/04 职场文书
保护地球的宣传语
2015/07/13 职场文书
win10下go mod配置方式
2021/04/25 Golang
防止web项目中的SQL注入
2021/12/06 MySQL