微信开发时遇到底部遮挡输入框的解决方案
在开发微信公众号功能时，页面底部一般会声明一些公司的版权之类的。但是如果用户需要在页面输入内容时，底部会漂浮在输入法的上面，甚至有的时候不是紧贴着输入法，而是有一小段间距。既影响用户输入又影响页面美观。截图是出现问题的页面：
解决问题的方案是，将如下的js放入出现此问题的页面中。js源码如下：
window.onresize = function() {
var top = $("#footer").offset().
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().取值示意图：
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！JavaScript ：input框输入时， 手机虚拟键盘把布局顶上去 下不来了！_百度知道
JavaScript ：input框输入时， 手机虚拟键盘把布局顶上去 下不来了！
怎么办？ 急急~~
我有更好的答案
布局用下min-height设置下最小高度试试
采纳率：43%
是不是在微信里面的~Orz
失焦就能让键盘下去。
手机上position：fixed会导致这个问题，避免input和position：fixed元素放一起，如果无法避免，推荐用iscroll解决这个问题
本回答被网友采纳
var flag =//先定义一个变量，当改变窗口大小的时候用来做判断window.onresize = function () {if (flag) {//如果flag为true，键盘弹起，改变底部按钮的position，同时将flag改为false$(&.subbmit&).css({&position&: &initial&});flag =} else {$(&.subbmit&).css({&position&: &fixed&});flag =}};解释:对于手机不要管输入框是否获取焦点,换个角度,我们从窗口入手,只要改变了窗口大小就会改变flag的值;即小键盘打开(flag=true)对应initial；小键盘关闭(flag=flase)对应fixed
2条折叠回答
为您推荐：
其他类似问题
手机虚拟键盘的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。html5页面当点击input输入框弹出安卓手机上键盘就会把footer顶了上来_百度知道
html5页面当点击input输入框弹出安卓手机上键盘就会把footer顶了上来
只要点击input框弹出输入法
footer就会被顶上去，出现在输入法的上方，感觉就像整个页面缩小了一样
我有更好的答案
用js在input的focus状态下隐藏footer$(&input&).foucus(function(){$(&.footer&).hide();});以上是jq代码，自己按需修改
好像是输入法把整个页面顶上去缩小了
采纳率：64%
为您推荐：
其他类似问题
安卓手机的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。22:34 提问
HTML5 手机页面 输入表单被键盘遮挡住了
HTML5 手机页面 输入表单被键盘遮挡住了
请问 大神 怎么
js 或者 JQ 判断安卓手机软键盘的键盘隐藏键按下去了？
有使用 uexWindow 方法 能判断到确定键 是 13 但是不知道这个键的键值 是什么？
或者有什么其他方法？ 判断窗口尺寸改变的 size 方法无效
按赞数排序
没有相关的事件来获取隐藏按钮点击，keydown/keyup事件中获取到的keyCode都是0，楚了你说的前往keyCode 13.
可以用计时器监视window.innerHeight高度改变来判断。
下面的代码在android chrome浏览器下测试正常，
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"&&/script&
&input type="text" id="txt" /&
&div id="dv"&&/div&
var timer, windowInnerH
function eventCheck(e) {
if (e) { //blur,focus事件触发的
$('#dv').html('android键盘' + (e.type == 'focus' ? '弹出' : '隐藏') + '--通过' + e.type + '事件');
if (e.type == 'click') {//如果是点击事件启动计时器监控是否点击了键盘上的隐藏键盘按钮，没有点击这个按钮的事件可用，keydown中也获取不到keyCode值
setTimeout(function () {//由于键盘弹出是有动画效果的，要获取完全弹出的窗口高度，使用了计时器
windowInnerHeight = window.innerH//获取弹出android软键盘后的窗口高度
timer = setInterval(function () { eventCheck() }, 100);
else clearInterval(timer);
else { //计时器执行的，需要判断窗口可视高度，如果改变说明android键盘隐藏了
if (window.innerHeight & windowInnerHeight) {
clearInterval(timer);
$('#dv').html('android键盘隐藏--通过点击键盘隐藏按钮');
$('#txt').click(eventCheck).blur(eventCheck);
HTML5 手机页面 输入表单被键盘遮挡住了
请问 大神 怎么 js 或者 JQ 判断安卓手机软键盘的键盘隐藏键按下去了？
有使用 uexWindow 方法 能判断到确定键 是 13 但是不知道这个键的键值 是什么？
或者有什么其他方法？ 判断窗口尺寸改变的 size 方法无效
答：这个键应该和实体键上的返回是一个，功能也是一样的，你试一下
怀疑键值为0x1B，十进制27，试一下
请问这个问题怎么处理？？？
怎么解决的？求解决方法~！
你怎么解决的 ，求 方案
看看从屏幕高度的方面能不能判断呢？实在不行你输出下键值，然后先对照看下。13相当于回车键。
应该可以用css和jquery mobile来调整页面的长度实现把
等一下 逐一尝试
成功后 回来给分
怎么解决的
准确详细的回答，更有利于被提问者采纳，从而获得C币。复制、灌水、广告等回答会被删除，是时候展现真正的技术了！
其他相关推荐做html5 页面 在安卓手机上键盘 把底部导航顶上去了 怎么解决_百度知道
做html5 页面 在安卓手机上键盘 把底部导航顶上去了 怎么解决
我有更好的答案
估计导航用的fixed定位吧，var&windheight&=window.innerH&&&&&&&&&&var&bottomx&=&document.getElementById('bottomx');&//底部导航&&&window.onresize(function(){&&&&var&docheight&=&window.innerH&&&&&&&&&&&&&if(docheight&&&windheight){&&&&&&&&&&&&&&&&&&&&bottomx.style.position&=&'static';&&&&}else{&&&&&&&&bottomx.style.position&=&'fixed';&&&&}&&&&&&&&})
采纳率：100%
你底部用的一定是fixed定位吧...你可以再文本框获取焦点事件的时候把底部导航隐藏或者改成absolute
本回答被网友采纳
1.html&nav class=&mui-bar mui-bar-tab&&&a id=&next& href=&#&&&div style=&background-color: #F29700;text-align:padding-top: 15padding-bottom: 15&&&span style=&color: #FFFFFF;font-size: 15&&下一步&/span&&/div&&/a&&/nav&2.jsvar h = document.body.scrollHwindow.onresize = function(){if (document.body.scrollHeight & h) {document.getElementsByTagName(&nav&)[0].style.display = &none&;}else{document.getElementsByTagName(&nav&)[0].style.display = &block&;}};
1条折叠回答
为您推荐：
其他类似问题
安卓手机的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。}