IOS下中,软键盘处于窗口最顶层,与原有的窗口不冲突,所以底部导航条不会被顶起,但是在android下,软键盘与窗口处于同一层,所以当软键盘弹起时,当前窗口缩小,那么窗口内容自然要被挤;

解决办法:

安卓机:通过判断当前窗口的resize来判断窗口是否变化;

//判断当前设备
var browser = {
versions: function () {
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, //IE内核
isOpera: u.indexOf("Opera") > -1,
isIEbrowser: u.indexOf("compatible") > -1 && u.indexOf("MSIE") > -1 && !(u.indexOf("Opera") > -1),//判断是否IE<11浏览器
isEdge: u.indexOf("Edge") > -1,
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1,//火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') === -1, //是否web应该程序,没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增)
qq: u.match(/\sQQ/i) === " qq" //是否QQ
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}; function judgeDeviceType(){
if(browser.versions.android){
var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
$(window).resize(function(){
var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
if(resizeHeight<originalHeight){//软键盘弹起
$('footer').hide();
}else{
$('footer').show();
}
});
} }

IOS下,用resize方法监测不出软键盘的收起,只能用输入框获取焦点与失去焦点的方式判断;

H5软键盘弹起收回(IOS与Android)的更多相关文章

  1. h5软键盘挡住输入框问题解决(android)

    问题 移动端浏览器中的表单在部分android机型上测试,点击靠下的输入框时会遇到弹出的软键盘挡住输入框问题 ios可自身弹起(ios自身的调整偶尔也会出问题,例如第三方键盘会遮挡,原因是第三方输入法 ...

  2. h5软键盘弹起 底部按钮被顶起问题解决

    解决思路: 当键盘弹起时隐藏掉按钮,键盘隐藏时按钮显示 监测键盘是否弹起(浏览器页面是否发生变化) 代码: 1.定义一个底部按钮 <div class="returnbtn" ...

  3. H5软键盘兼容方案

    前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: ...

  4. 可能这些是你想要的H5软键盘兼容方案

    前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: ...

  5. h5 移动端 监听软键盘弹起、收起

    前面一篇博客 h5 安卓 键盘弹起界面适配 修改webview高度提到了在adnroid中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化window.onresize事件来做突破点的,但是io ...

  6. Android之监听手机软键盘弹起与关闭

    背景: 在很多App开发过程中需要在Activity中监听Android设备的软键盘弹起与关闭,但是Android似乎没有提供相关的的监听API给我们来调用,本文提供了一个可行的办法来监听软键盘的弹起 ...

  7. android全屏下的输入框未跟随软键盘弹起问题

    最近开发中遇到,全屏模式下输入框在底部不会跟随软键盘弹起.于是网上搜索了解决的方案.大致找到了两种方案. 第一种 定义好此类 public class SoftKeyBoardListener { p ...

  8. 微信中使用popup等弹窗组件时点击输入框input键盘弹起导致IOS中按钮无效处理办法

    因为在IOS微信中在弹窗中使用input使键盘弹起,使弹窗的位置上移,当键盘关闭时页面还在上面,弹窗位移量也在上面,只有下拉才能回到原位,这样弹窗也消失了.我的处理办法就是在键盘弹起和消失的时候,让页 ...

  9. 总结几个移动端H5软键盘的大坑

    1.部分机型软键盘弹起挡住原来的视图 解决方法:可以通过监听移动端软键盘弹起 Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内.参数如下. true,表示 ...

随机推荐

  1. Jmeter之Json提取器详解(史上最全)

    参考资料:https://www.bbsmax.com/A/D854lmBw5E/ Jsonpath在线测试:http://jsonpath.com/ 实际工作中用到的一些场景: 提取某个特定的值 提 ...

  2. Netty源码学习系列之1-netty的串行无锁化

    前言 最近趁着跟老东家提离职之后.到新公司报道之前的这段空闲时期,着力研究了一番netty框架,对其有了一些浅薄的认识,后续的几篇文章会以netty为主,将近期所学记录一二,也争取能帮未对netty有 ...

  3. Python内存管理机制-《源码解析》

    Python内存管理机制 Python 内存管理分层架构 /* An object allocator for Python. Here is an introduction to the layer ...

  4. SignalR控制台自托管服务端向web客户端指定用户推送数据,客户端断线重连

    一.前言 SignalR是微软推出的开源实时通信框架.其内部使用Web Socket, Server Sent Events 和 Long Polling作为底层传输方式,SignalR会根据客户端和 ...

  5. 小菜成长之路,警惕沦为 API 调用侠

    小菜(化名)在某互联网公司担任运维工程师,负责公司后台业务的运维保障工作.由于自己编程经验不多,平时有不少工作需要开发协助. 听说 Python 很火,能快速开发一些运维脚本,小菜也加入 Python ...

  6. 轻量级进度条 – Nprogress.js

    进度条库是前端中常见的库之一,bootstrap中提供了多种进度条样式.NProgress.js和nanobar.js是两款轻量级的进度条组件,使用简便. 官网: NProgress.js:http: ...

  7. php实现登录失败次数限制

    需求:同一个账号在同一个IP地址连续密码输错一定次数后,这个账号是会被锁定30分钟的. 实现思路: 需要一个表(user_login_info)负责记录用户登录的信息,不管登录成功还是失败都记录.并且 ...

  8. 撒花,推荐一下我怒肝的 GitHub

    缘起 之前一直有很多小伙伴们找我,让我聊一聊如何学习 Java ,我都直接回复了一个思维导图,后来想一想觉得回答不是很认真,我的初衷是想让小伙伴们根据思维导图中的知识点,采取各个击破 的原则,哪里不会 ...

  9. <Android> Location Service 分析

    由于各种原因,老师希望我学习Android系统源码以应对可能参与的项目.我只好深入曹营,刺探军情了. 定位服务是手机上最常用的功能之一,据说也是相对比较简单的服务,所以从这里入手.其他系统服务的架构都 ...

  10. Redis底层结构全了解

    第一篇文章,思来想去,写一写Redis吧,最近在深入研究它. 一丶Redis底层结构 1. redis 存储结构 redis的存储结构从外层往内层依次是redisDb.dict.dictht.dict ...