博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
H5页面关于android软键盘弹出顶起底部元素的解决方案
阅读量:6441 次
发布时间:2019-06-23

本文共 772 字,大约阅读时间需要 2 分钟。

  应用场景:用div在移动端页面设置一个底部工具栏,css的代码大概如下:

.tool{
width: 100%; height: 60px; position: fixed; left: 0px; bottom: 0px; background-color: #000080 }

  如果页面有一输入框<input type="text">,在点击输入框输入内容时,移动端软键盘弹起,这时这个div也一起弹起,顶在软键盘上面,会遮挡输入框,要用下面的方法去消除弹起来的div,主要思路是div弹起来后隐藏掉。

  通过resize方法监听$(this).height(),获取页面高度,成功获得改变后的页面高度,软键盘弹出时隐藏被顶起的页面。

var winHeight = $(window).height();   //获取当前页面高度        $(window).resize(function(){           var thisHeight=$(this).height();            if(winHeight - thisHeight >50){                 //当软键盘弹出,在这里操作            $(".顶起的页面").hide();            }else{                //当软键盘收起,在此处操作            $(".顶起的页面").show();            }        });

  this是html对象 $(this)是jq对象,调用jq对象的height()方法。

转载于:https://www.cnblogs.com/qingsong/p/9864104.html

你可能感兴趣的文章
React prop类型检查与Dom
查看>>
jQuery Ajax
查看>>
朱兰的质量三部曲——《可以量化的管理学》
查看>>
丰田生产方式和TOC工序切换时间的解决
查看>>
Spring MVC自定义消息转换器(可解决Long类型数据传入前端精度丢失的问题)
查看>>
2017年勒索软件、物联网攻击将继续肆虐
查看>>
用友网络董事长王文京为何出现在乌镇大会中?
查看>>
大学团队打造手语翻译机器人,完整安装下来需要149个小时
查看>>
Wireshark抓包分析/TCP/Http/Https及代理IP的识别
查看>>
不同包下,相同数据结构的两个类进行转换
查看>>
软件安装(linux)
查看>>
TeamPlain for VSTS - Web Access for Team System-TFS 跨平台的客户端
查看>>
面对前车之鉴的AR,现在的VR要做些什么?
查看>>
vscode 换行符\n 变成\r\n
查看>>
一个绘制虚线的非常规函数(常规方法,打印机上绘制不出虚线)
查看>>
获得本机的IP,掩码和网关
查看>>
大数据之 ZooKeeper原理及其在Hadoop和HBase中的应用
查看>>
Delphi中将XML文件数据装入DataSet
查看>>
你刚才在淘宝上买了一件东西
查看>>
发布一个 Linux 下的 C++ 多线程库
查看>>