应用场景:用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()方法。

H5页面关于android软键盘弹出顶起底部元素的解决方案的更多相关文章

  1. Android软键盘弹出,覆盖h5页面输入框问题

    之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位 ...

  2. android软键盘弹出引起的各种不适终极解决方案

    android软键盘弹出引起的各种不适终极解决方案 以下描述如何解决ListView高度小于0时出现的UI问题. 创建RelativeLayout的子类TxrjRelativeLayout publi ...

  3. Android 软键盘弹出,界面整体上移

    在做搜索功能的时候,点击搜索框,搜索框获取焦点,键盘弹出:现在问题出来了,android软键盘弹出的时候,android整个界面上移,布局被挤压,很难看:要解决这个问题,我们需要用到 windowSo ...

  4. Android软键盘弹出时布局问题

    最近项目需要做一个类似聊天室的模块,基于Socket实现的,这部分稍后一段时间再做总结,功能上的相关点都实现了小例子也做出来了,最后发现一个比较腻歪的问题就是软键盘弹出时总是会把标题“挤出”屏幕,(无 ...

  5. Android软键盘弹出时把布局顶上去的解决方法

    原文: 解决Andriod软键盘出现把原来的布局给顶上去的方法(转) 链接:http://blog.sina.com.cn/s/blog_9564cb6e0101g2eb.html 决方法,在main ...

  6. html5 虚拟键盘弹出挡住底部的输入框解决方案

    问题描述: 我们使用 h5 做移动网站开发时,如果文本框在页面的下方,当输入信息弹出的软键盘会将输入框挡住(Android 会有这个问题,IOS会自动将整个页面上移),IOS中软键盘关闭后,页面上移的 ...

  7. Android中软键盘弹出时底部菜单上移问题

    当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一:在你的activity中的oncrea ...

  8. Android 软键盘弹出时把原来布局顶上去的解决方法

    键盘弹出时,会将布局底部的导航条顶上去. 解决办法: 在mainfest.xml中,在和导航栏相关的activity中加: <activity            android:name=& ...

  9. 微信H5页面 会被软键盘顶起来

    问题描述:H5页面在微信中打开,input输入框获取焦点时,页面被软键盘顶上去:关闭软键盘时,页面不会自动下来(恢复初始状态) H5页面在微信中初始状态如下图: input输入框获取焦点时,页面被软键 ...

随机推荐

  1. Sublime Text添加插入带当前时间说明

    Sublime Text添加插入带当前时间说明   作者:木尘 日期:2014-11-25 插件实现插入带时间功能的说明: 1. 创建插件: Tools → New Plugin: import da ...

  2. Java之File类详解

    常用操作: File f = new File("C:\\testdata\\filedir\\a\\b\\c"); f.mkdir(); //建立单级目录 f.mkdirs(); ...

  3. 使用fiddler的过滤条件

    使用fiddler抓包的时候经常一下子显示很多的记录,看的眼花缭乱,需要这时候需要使用过滤条件来帮助你,一般常用的有三种过滤条件: 1.域名过滤,只显示特定域名的记录: *.baidu.com表示所有 ...

  4. 【大数据】Zookeeper学习笔记

    第1章 Zookeeper入门 1.1 概述 Zookeeper是一个开源的分布式的,为分布式应用提供协调服务的Apache项目. 1.2 特点 1.3 数据结构 1.4 应用场景 提供的服务包括:统 ...

  5. 【刷题】LOJ 6002 「网络流 24 题」最小路径覆盖

    题目描述 给定有向图 \(G = (V, E)\) .设 \(P\) 是 \(G\) 的一个简单路(顶点不相交)的集合.如果 \(V\) 中每个顶点恰好在 \(P\) 的一条路上,则称 \(P\) 是 ...

  6. BZOJ.2212.[POI2011]Tree Rotations(线段树合并)

    题目链接 \(Description\) 给定一棵n个叶子的二叉树,每个叶节点有权值(1<=ai<=n).可以任意的交换两棵子树.问最后顺序遍历树得到的叶子权值序列中,最少的逆序对数是多少 ...

  7. Codeforces Round #541

    因为这次难得不在十点半(或是更晚),大家都在打,然后我又双叒叕垫底了=.= 自己对时间的分配,做题的方法和心态还是太蒻了,写的时候经常写一半推倒重来.还有也许不是自己写不出来,而是在开始写之前就觉得自 ...

  8. HDU 5574 Colorful Tree

    • 给出一棵树,每个点有初始的颜色,支持两种操作• 将一个点的子树染成一种给定颜色• 问一个点的子树里有几种不同的颜色 •

  9. 多线程(模拟买票)-----java基础知识总结

    这次的的问题引入的比较深入,如果看了这篇博客,不看下一篇,你会很懵逼. 代码: package com.day13.math; /** * 类说明 :模拟三个窗口同时售票 * @author 作者 : ...

  10. 最长回文子串问题-Manacher算法

    转:http://blog.csdn.net/dyx404514/article/details/42061017 Manacher算法 算法总结第三弹 manacher算法,前面讲了两个字符串相算法 ...