移动端input获取焦点弹出输入框时影响fixed布局的问题

最近在做移动端项目的时候遇到的一个问题,在点击input获取焦点弹出输入框进行输入后,再次点击input输入框时,意外的事情发生了,

页面突然跳转到确定按钮跳转的页面了,刚开始以为是点击穿透导致的,朝着这个方向一直没有等到解决。。。

经过反复研究,发现第二次点击input 时,上面有一个隐形的按钮,这是怎么回事,确定按钮怎么就跑到上面去了呢,原来是由于最外层

使用了fixed布局,而第一次点击input获取焦点时,移动端默认弹出的输入框会将fixed布局的元素顶上去。

解决办法:

1、如果使用的元素不是必须使用fixed布局的话可以不使用;

2、元素必须使用fixed布局时,在input获得焦点时将元素的position设置为static,失去焦点时再将元素的position设置为fixed;

$('#phone').bind('focus',function(){
    $('.bottom_fix').css('position','static');
}).bind('blur',function(){
        $('.bottom_fix').css({'position':'fixed','bottom':'0'});
});

  

猜你喜欢

转载自www.cnblogs.com/yanganglanyu/p/10444094.html