h5页面 ios软键盘挡住输入框问题解决

最近做混合app开发的时候，遇到一个很头疼的问题，在ios上，输入文本时，软键盘会挡住输入框，如下图。

当发完一条消息后，软键盘会弹起挡住输入框，发第二条消息的时候，就不得不先收起软键盘，用户体验很差。而这个问题在android手机上却没有。
于是在网上找到一个解决方案，就是发完消息后，手动让页面滚到最底部。

window.scrollTo(0, 9999);

这样输入框确实出来了，但是会在底部留下一些空白（坑爹的ios系统）

于是就想如果少滚动一点，不把空白滚动出来就行了，但是滚动多少距离刚合适呢？其实滚动软键盘的高度就可以了，这就要获取软件盘的高度了。如何获取手机软键盘高度

var timer = {
    id:null,
    run:function (callback,time) {
        this.id = window.setInterval(callback,time);
    },
    clean:function () {
        var that = this;
        this.id = window.clearInterval(that.id);
    }
};
var keyboardHeight = 0,screenHeight = window.innerHeight;
input.addEventListener('focus',function (evt) {
    if(!keyboardHeight){
        timer.run(function () {
            if (screenHeight !== window.innerHeight) {
                keyboardHeight = screenHeight-window.innerHeight;
                timer.clean()
            }
        }, 50)
    }
});
input.focus();

然后在需要滚动视图的位置添加

window.scrollTo(0, screenHeight);

这样就完美解决了。
参考资料：https://www.cnblogs.com/johnv/p/9518801.html