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

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

回答:

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

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

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

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

addEventListener('blur', () => { 

});

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

scrollIntoViewIfNeeded()

回答:

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

    //  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()
});

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注