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

Posted 2021-02-11 yanganglanyu

最近在做移动端项目的时候遇到的一个问题，在点击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‘})；
});