解决手机端微信公众号内input输入框获取焦点后,底部导航栏显示在输入法软键盘上面的问题

今天遇到在微信公众号中打开网站,input 输入框和textarea输入框获取焦点后,弹出输入法键盘,将底部的导航栏”顶到“输入法键盘上面的问题,看着非常shit!

解决手机端微信公众号内input输入框获取焦点后,底部导航栏显示在输入法软键盘上面的问题_第1张图片

直接上代码看效果 

        var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        $(window).on('resize', function (e) {
            var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
            if (clientHeight > nowClientHeight) {
                //键盘弹出的事件处理,隐藏底部导航栏
                $("#plugin-contact-ring2").hide();
            }
            else {
                //键盘收起的事件处理,显示底部导航栏
                $("#plugin-contact-ring2").show();
            }
        });

我之前想到的一种方案是通过焦点事件来控制导航栏的显示与隐藏,这种方案有一个弊端:针对多个input或textarea需要来回切换,这样导航栏频繁显示和隐藏,体验更差,因此放弃了这种方案!

之前在粮食公司同样遇到这种方案,当时的PM给出的解决方案是:在需要输入的页面,隐藏掉底部导航栏,这种情况更蛋疼,要知道,当时的项目至少有几十个页面,改起来贼蛋疼,现在的方案,只需要放在layout母版页中即可。

你可能感兴趣的:(微信开发,微信开发)