微信开发时遇到底部遮挡输入框的解决方案

在开发微信公众号功能时,页面底部一般会声明一些公司的版权之类的。但是如果用户需要在页面输入内容时,底部会漂浮在输入法的上面,甚至有的时候不是紧贴着输入法,而是有一小段间距。既影响用户输入又影响页面美观。截图是出现问题的页面:
微信开发时遇到底部遮挡输入框的解决方案
解决问题的方案是,将如下的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;取值示意图:
微信开发时遇到底部遮挡输入框的解决方案

微信开发时遇到底部遮挡输入框的解决方案

上一篇:第三方分享(新浪,微信,QQ)


下一篇:django搭建微信订阅号(一)