600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 解决手机端微信公众号内input输入框获取焦点后 底部导航栏显示在输入法软键盘上面的问题

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

时间:2020-10-12 06:58:49

相关推荐

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

今天遇到在微信公众号中打开网站,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母版页中即可。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。