遇上了，fixed属性在IOS软键盘弹出后失效

老大给我看了一个展示效果，让我排查一个问题

在我iPhone6s的手机，搜索轻松筹公众号，进入到首页，从首页列表的大病筹款项目随意点击一个进去到详情页，去给这个项目筹款支持，当输入框获取到焦点，点击完成之后。再点击底部的支付按钮点击无效，点击支付按钮的上面确可以吊起支付。很明显这个问题已经影响到我们的支付订单，需要快速定位问题并解决。

定位问题，寻找解决思路

我将问题简单描述后搜索，定位到问题是在iOS上输入框获取到焦点时，软键盘会把fixed元素顶上去。如果是这个问题我将 fixed 定位改为 absolute，是不是就可以解决。

修改后，测试发现并没有解决问题，可见软键盘并不仅仅是将 fixed 元素顶上去，也把 absolute 顶上去了。也有可能是其它问题造成的。

初级解决方案

后来寻得一个解决方案，将页面主题内容放到一个盒子里，再将这个盒子放到大盒子里，将大盒子 absolute 定位，脱离文档流。当输入框获取到焦点的时候，将小盒子的高度设置为当前页面的可视区域问题。当输入框失去焦点的时候，将小盒子的高度设置为 auto。

主结构和逻辑代码如下

// 结构处理

    

    
    


// 样式处理 脱离文档流
.paycontainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow-y:scroll;
    padding-bottom: 65px;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;

    .paycontent {
        height: auto;
    }
}

// 逻辑处理 输入框获取焦点和失去焦点的处理
$('#money-input').focus(function() {
    $('.paycontent').height($(window).height()+'px');
});

$('#money-input').blur(function() {
    $('.paycontent').height('auto');
});  

这样处理确实可以解决这个问题。就高高兴兴去测试完上线。

再次碰到类似问题

后来一个同事的活动专题页也出现了这个问题，他的场景时是在弹窗中有输入框吊起软键盘出现的问题。而且他的是弹窗是动态插入的，所以不太方便通过结构处理。

我同事打算通过监听键盘的调起和隐藏来处理，他尝试这么去做，好像并没有解决。后来从原理上分析。

安卓调出软键盘的时候，会将弹窗盖住，这里需要将弹窗主题内容往上调。ios的机制是，调出软键盘的时候，会将主题内容往上推，将input框以及下面的按钮顶上去。不管是上面的textarea还是下面的input输入框，它们任意一个获得焦点的时候，手机的软键盘都会抬起将fixed定位于屏幕最低端的“提交”按钮顶上去，大多数ios手机在软键盘收起的时候都可以将推上去的部分拉来，有时候拉不下拉，对于拉不下来的就出问题了。虽然看上去视图没调整，但是位置都偏上，实际上用户在操作的时候，就点击不了要点击的按钮了。

我的小伙伴想到一个方法，当输入框失去焦点的时候将推上去的拉下来，设置body的 scrollTop 为0，这真是一个好办法，百使不爽。

终极方案

解决输入框input获取焦点得时，虚拟键盘会把fixed元素顶上去的终极解决方法。

// ios 软键盘弹出时 body的scrollTop 设为0
if(checkIOS()){
    $UI.on('blur', 'input', function() {
        $('body').scrollTop(0);
    })
}

// 检测ios系统
function checkIOS() {
    let u = navigator.userAgent;
    let isIOS =!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    return isIOS;
}