一个页面上有个固定在底部的按钮,页面中有个input框,点击input框获取焦点时,在苹果手机上没事,但在安卓手机上弹出的键盘会将按钮顶起来,这就很不好看了,想了个办法解决一下。之前一直觉得用input获取焦点和失去焦点来改变底部按钮的定位,但是有的手机可以隐藏键盘,但是不会失去焦点,这个方法就不行了。后来想了一下,键盘弹出,改变了窗口的大小,所以就想在onresize中来解决。代码如下:
var flag = false;//先定义一个变量,当改变窗口大小的时候用来做判断
$("input").focus(function(){//获取焦点时,flag为true
flag = true;
});
window.onresize = function(){
if(flag){//如果flag为true,键盘弹起,改变底部按钮的position,同时将flag改为false
$("button").css({"position":"initial"});
flag = false;
}else {
$("button").css({"position":"fixed"});
if(document.activeElement.id == "changeNum"){//如果只是收起键盘,而不失去焦点,仍然将flag设为true,否则键盘弹起时仍会将底部按钮顶起
flag = true;
};
};
};