微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo
前言
做好了项目之后,在各种浏览器里面測试,都没有问题.非常高兴,交付后端使用.然而发如今微信自带浏览器里面,却是出现了问题.
我的页面是一堆文本框,须要用户输入,当页面比較长的时候,在以下的文本框会被输入法给挡住…我勒个去.
写了一段JS脚本,測试了一下,发现,在正常的浏览器其中,当调出输入法的时候,视窗的高度,会降低,以适应输入法占领的屏幕空间.在QQ自带的浏览器里面,也是全然正常的.仅仅有在微信里面,存在这个问题.而且,表现形式非常奇葩:
| 机型 | 表现形式 |
|---|---|
| iphone6 | 看上去正常,但视窗高度并没有改变.页面能够滑动 |
| iphone5 | 不正常,能滑动,但默认没有滑动到当前input |
| 红米note | 正常,没有问题 |
| 小米4/5 | 不正常,不能滑动,无法使用 |
与手机操作系统和微信版本号都有关系,上面的表格仅仅是我这边的測试结果.
反正不管怎样,微信自带的浏览器不会由于调出输入法就改变视窗的高度,这是最核心的问题.
思路
项目已经做好了,我如今仅仅能打个补丁上去,通篇的解决这个该死的兼容性问题.项目中採用了jquery2版本号.因此,这个补丁使用jquery语法来写.
- 要将当前焦点的文本框调整到可视区域
- 要给页面尾部添加空间,以抵消输入法的高度占领的空间
- 考虑性能,仅仅能给微信使用,其它浏览器不运行.
开工
首先找来一段推断是否在微信浏览器的代码,例如以下:
// 推断是否是微信
function is_weixn(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}考虑了一下我的项目中,全部出现这个问题的地方,都是使用了input标签.可是,并不是全部的input标签都须要调用出输入法,比方button和多选框等.因此,我自己构建了一个推断是否须要调用输入法的函数,例如以下:
// 推断是否为文本框
function is_text(type){
if (type=="text" || type=="number" || type=="password" || type=="tel" || type=="url" || type=="email") {
return true;
};
}最后,依照自己的想法,攻克了一下这个问题,代码例如以下:
// 用于解决微信自带浏览器输入法遮挡文本框的处理
$(function(){
if (is_weixn()){
var inp = $("input"),
win = $(window),
bod = $("body"),
winH = win.height();
inp.each(function(){
var t = $(this),
tTop = t.offset().top,
tType = t.prop('type');
if (is_text(tType)) {
t.on('click',function(event) {
bod.height(winH+300);
bod.animate({scrollTop: tTop-100 + 'px'}, 200);
});
};
});
};
})应该是有优化的空间的.只是我的JS水平真心一般.临时先解决问题吧-_-|||
本文由FungLeo原创,转载请保留版权申明,以及首发地址: http://blog.csdn.net/fungleo/article/details/51005911