H5开发中键盘导致的页面塌陷解决方法都有哪些？

Question

目前使用的方法是在键盘弹出的页面设置页面的最小高度min-height,请问还有哪些更为优雅的方式解决这个问题呢？

Answer 1

场景一：如果你是在自己app中集成的h5页面
解决方案：让客户端开发人员监听键盘弹起事件，将webview的contentview的高度减去键盘的高度，这样可以解决掉原生键盘和第三方键盘的适配问题

场景二：在第三方平台，（微信其实用了第一种方案）
需要区分平台了iOS和android的处理方式不一样，android键盘弹起和收起window会触发resize事件

记录原始高度
window.addEventListener('resize', () => {
    对比原始高度来做响应的逻辑
})

iOS比较恶心了，比较老的版本，UIWebview你需要对dom进行监听focus和blur事件来做出响应的调整

addEventListener('blur', () => { 

});

WKWebview的话可以使用下面方法（如果这个不能解决，使用上面的方法试下，反正遇到第三方键盘很恶心）

scrollIntoViewIfNeeded()

Answer 2

在监听操作到键盘消失时调用此方法

    //  ios键盘消失后的停留空白问题
    function resolveBug( e ){
        setTimeout(function(){
            if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
                return
            }
            let result = 'pc';
            if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
                result = 'ios'
            }else if(/(Android)/i.test(navigator.userAgent)) {  //判断Android
                result = 'android'
            }
            if( result = 'ios' ){
                document.activeElement.scrollIntoViewIfNeeded(true);
            }
        },10)
    }

监听 resize

window.addEventListener('resize', () => {
    resolveBug()
})

监听 ios 手机点击完成按钮

$(document).on('focusout', function () {
    resolveBug()
});

监听失去焦点事件

window.addEventListener('blur', () => { 
    resolveBug()
});