微信开发时遇到底部遮挡输入框的解决方案
来源:互联网 发布:linux system 函数 编辑:程序博客网 时间:2024/06/02 03:22
在开发微信公众号功能时,页面底部一般会声明一些公司的版权之类的。但是如果用户需要在页面输入内容时,底部会漂浮在输入法的上面,甚至有的时候不是紧贴着输入法,而是有一小段间距。既影响用户输入又影响页面美观。截图是出现问题的页面:
解决问题的方案是,将如下的js放入出现此问题的页面中。js源码如下:
//解决输入被遮挡问题 window.onresize = function() { var top = $("#footer").offset().top; var user_message_box = $('#footer'); top > 400 ? user_message_box.hide() : user_message_box.show(); };
其中#footer是底部div的id值,进过多次测试发现无论屏幕大小,系统不同(android或ios)用此js都可以解决底部遮挡输入框的问题。而且经过多次测试发现在手机上400高度是个合适的数值。下图是解决之后的效果图(当输入发弹起时,底部声明不见了,当输入法消失时底部又自动出现):
1、有人会说底部的div是不是没有固定死,其实不是的。底部就是用css固定了,但是在手机上,如果调用了输入法,底部就会出现。初步怀疑屏幕大小就是整个屏幕高度减去输入法框占用的高度。
2、可能还有人说为什么不把底部声明信息去掉呢?去掉底部会显得页面光秃秃的,而且主要是领导不同意去掉底部!所以就得解决掉。
$(“#footer”).offset().top;取值示意图:
1 0
- 微信开发时遇到底部遮挡输入框的解决方案
- 实现类似QQ、微信聊天界面,标题栏固定,键盘不遮挡底部输入框
- 开发笔记---软键盘遮挡输入框和导航栏遮挡了内容的解决方案
- Android虚拟导航栏遮挡底部的输入框
- Flex 开发android程序键盘遮挡输入框解决方案
- iOS_开发经验总结:键盘遮挡输入框时的解决方法
- h5键盘遮挡输入框问题 、模仿微信输入框失去焦点时隐藏iphone的软键盘和聚焦时出现输入框
- Android 解决在页面底部置输入框,软键盘遮挡部分输入框的问题
- 沉浸模式下键盘遮挡输入框的解决方案
- 【Android】EditText 遇到软键盘遮挡底部一点的问题
- 移动端固定输入框在底部会被键盘遮挡的解决方法
- 移动端固定输入框在底部会被键盘遮挡的解决方法
- iOS 键盘遮挡输入框解决方案
- 底部EditText输入框遮挡问题分析与总结
- 定位底部的输入框被软键盘覆盖解决方案
- ios开发时,键盘遮挡输入框解决方法
- Swift 解决IOS开发中TableView中编辑UITextField时键盘遮挡输入框的情况
- 基于微信公众平台开发过程中遇到的问题及解决方案
- <转>主流蓝牙BLE控制芯片详解(1):TI CC2540
- MongoDB安装成为Windows服务及日常使用遇到问题总结
- 源码
- CocoaPods使用手册
- 文章标题
- 微信开发时遇到底部遮挡输入框的解决方案
- MongoDB学习
- jQuery插件开发精品教程,让你的jQuery提升一个台阶 (原创地址 http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html)
- Android异步下载网络图片(其二AsyncTask)
- Centos GeoIP 安装成 PHP 扩展
- 关于MySQL的查询缓存
- 使用HtmlUnit登录百度
- echarts 生成统计图时,自动保存图片到服务器,并使用freemarker生成word
- 交换机TRUNK ACCESS HYBRID模式的理解