问题源头
移动端虚拟键盘出现的条件是:文本框(文本类)获得焦点
弹出键盘后原先定位与底部的东西会被虚拟键盘顶上去,样式错乱!
首先我们会想到监听focus和blur事件,但是会有bug,虚拟键盘有自带的收起键盘,这样输入框还是聚焦事件,并没有触发blur事件。所以会导致失效的。
解决办法
我们可以换一个思路。监听改变浏览器窗口高度的时候去触发事件。下面贴上代码
windowInnerHeight = window.innerHeight; //获取当前浏览器窗口高度
$(window).resize(function(){
if(window.innerHeight < windowInnerHeight){
$('.footer').removeClass('footerss');
}else{
$('.footer').addClass('footerss');
}
});