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

应用场景：用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

H5页面关于android软键盘弹出顶起底部元素的解决方案相关推荐

软键盘弹出时popwindow_【示例】解决软键盘弹出时底部元素上浮的问题
问题描述在html5plus环境下,当html中存在固定在底部的元素时,此时弹出软键盘的话,底部的元素也会被弹上来. 出现这种情况时,看起来页面布局好像乱掉了,这样给用户的体验不太理想. 问题分析 ...
解决Android软键盘弹出覆盖h5页面输入框问题 // 在ios系统中输入框软键盘消失后，页面不回弹的问题 // 解决苹果不回弹页面 // 微信环境打开
//解决Android软键盘弹出覆盖h5页面输入框问题 window.addEventListener('resize', () => {if (document.activeElement.t ...
Android 软键盘弹出时布局内指定内容上移实现及问题解决
Android 软键盘弹出时布局内指定内容上移实现及问题解决参考文章: (1)Android 软键盘弹出时布局内指定内容上移实现及问题解决 (2)https://www.cnblogs.com/as ...
Android 软键盘弹出时把布局顶上去，控件乱套解决方法
Android 软键盘弹出时把布局顶上去,控件乱套解决方法参考文章: (1)Android 软键盘弹出时把布局顶上去,控件乱套解决方法 (2)https://www.cnblogs.com/zhuj ...
Android软键盘弹出引起的各种不适终极解决方案
参考博客:Android软键盘弹出引起的各种不适终极解决方案 http://blog.csdn.net/itachi85/article/details/6596284 在这里做个笔记如果不想让软键 ...
Android 软键盘弹出时把原来布局顶上去的解决方法
Android 软键盘弹出时把原来布局顶上去的解决方法参考文章: (1)Android 软键盘弹出时把原来布局顶上去的解决方法 (2)https://www.cnblogs.com/Joanna-Y ...
Android软键盘弹出和收起的监听
Android软键盘弹出和收起的监听 1.直接调用 SoftKeyboardHelper softKeyboardHelper = softKeyboardHelper = new SoftKeybo ...
(转)Android软键盘弹出，界面整体上移
原地址:http://blog.csdn.net/u011622479/article/details/51161717 在做搜索功能的时候,点击搜索框,搜索框获取焦点,键盘弹出:现在问题出来了,an ...
html5手机底部输入框,html5 虚拟键盘弹出挡住底部的输入框解决方案
问题描述: 我们使用 h5 做移动网站开发时,如果文本框在页面的下方,当输入信息弹出的软键盘会将输入框挡住(Android 会有这个问题,IOS会自动将整个页面上移),IOS中软键盘关闭后,页面上移的 ...

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

H5页面关于android软键盘弹出顶起底部元素的解决方案相关推荐

最新文章

热门文章