解决安卓手机input获取焦点时会将底部固定定位按钮顶起的问题

一个页面上有个固定在底部的按钮,页面中有个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;

};

};

};

posted @ 2017-06-23 17:40  大兵008  阅读(3189)  评论(0编辑  收藏  举报