今天写了一个登录,但是登录按钮是固定在页面最底部。这种布局下,ios手机上是没问题的,但是在安卓手机上,键盘弹出后,登录按钮会挡住form表单。
原因就是,ios手机在键盘弹出后,页面高度不会发生变化的,但是安卓手机上键盘弹出后,页面高度 = 原始高度- 键盘高度。
原本想的就是根据input输入框的获焦和失焦来判断键盘的弹起与关闭,但是后来发现,有些手机上面的键盘有一个收起的按钮,点击那个按钮会收起键盘,但是不会触发失焦事件。并且在多个input输入框之间来回切换的时候也会有问题。
解决办法:由于无法获取键盘高度,所以只能监听页面高度变化,在发生变化的时候,改变登录按钮的定位方式。将fixed改为static(或者relative)
代码如下:
var client_h = document.documentElement.clientHeight;
$(window).on("resize",function(){
var body_h = document.body.scrollHeight;
if(body_h < client_h){
$(".operate").removeClass("fixed");
console.log("小了");
}else{
console.log("正常");
$(".operate").addClass("fixed");
}
});