解决手机端微信公众号内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母版页中即可。

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

微信公众号内下载pdf等文件，受微信所限制，安卓和IOS不同处理方式（最最最优版）
继上一篇文章微信公众号内下载pdf等文件,受微信所限制,安卓和IOS不同处理方式后觉得还有更好的解决办法,这次真的找到更加优化版本,一定需要后台配合才行:后台接口返回Blob,后端设置respons ...
解决了！微信公众号数学公式排版
解决了!微信公众号数学公式排版难的问题被 Markdown Nice 解决了!全网第一个解决的!怎么还没人知道呢! https://mdnice.com/ 给你最完美的解决方案! 行间公式我是清晰的 ...
vue.js 在微信公众号内实现视频播放
环境:我司从事在线教育行业,想要将老师的讲课视频实现在线播放并监控用户播放时长关键词:vue.js.微信公众号.video视频播放 1. 微信公众号内可以直接使用video进行视频播放 2. 微信公 ...
微信公众号内，实现下载 PDF 文件。
背景:需要在微信公众号内实现,通过点击一个[下载PDF文件]按钮,预期将 PDF 文件下载到本地自行打印. 前言:首先,本文采用的是配合后端的实现方案.后端返回file文件,通过 a 链接 ...
HTML5微信支付和微信公众号内微信支付(VUE)
实现html5微信支付以及微信公众号内微信支付微信公众号内微信支付首先进行微信授权获取code /*获取授权拿到code*/getCodeApi(state){//获取codelet urlNow ...
微信公众号内跳转小程序
微信公众号内跳转小程序微信官方文档:概述 | 微信开放文档引入微信sdk: <script src="https://yun.duiba.com.cn/cdqd/cdn/jweix ...
ios手机端表单input调用focus方法时，光标不显示，但软键盘会弹出来，可以修改内容，需要修改内容后光标才显示
功能: ios表单验证时,比如输身份证号,失焦后验证身份证,如果不合法,就让光标跳到对应的输入框,我是不合法就调用focus方法,完了会跳过去,但是ios有个bug,它确实会定位到对应的输入框,而且 ...
小程序 php wecahtpay,PHP 微信公众号，小程序获取支付参数。微信支付
PHP 微信公众号,小程序获取支付参数.微信支付发布时间:2018-09-26 11:19, 浏览次数:278 , 标签: PHP 首先下载微信官方demo放入项目中地址:https://gith ...
微信公众号配置测试账号获取code
微信公众号内嵌H5,配置测试账号获取code 登录微信公众平台配置测试账号在微信开发者工具中,获取code 登录微信公众平台找到开发者工具点击公众平台测试账号配置测试账号填写信息注意点: ...

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

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

最新文章

热门文章