今天遇到在微信公众号中打开网站,input 输入框和textarea输入框获取焦点后,弹出输入法键盘,将底部的导航栏”顶到“输入法键盘上面的问题,看着非常shit!
直接上代码看效果
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母版页中即可。