软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> 微信自带浏览器被输入法阻挡文本框的jQuery解决方法byFungLeo -> 正文阅读

[Web前端]微信自带浏览器被输入法阻挡文本框的jQuery解决方法byFungLeo


微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo

前言


做好了项目之后,在各种浏览器里面测试,都没有问题.很高兴,交付后端使用.然而发现在微信自带浏览器里面,却是出现了问题.
我的页面是一堆文本框,需要用户输入,当页面比较长的时候,在下面的文本框会被输入法给挡住…我勒个去.
写了一段JS脚本,测试了一下,发现,在正常的浏览器当中,当调出输入法的时候,视窗的高度,会减少,以适应输入法占据的屏幕空间.在QQ自带的浏览器里面,也是完全正常的.只有在微信里面,存在这个问题.并且,表现形式非常奇葩:
机型 表现形式
iphone6 看上去正常,但视窗高度并没有改变.页面可以滑动
iphone5 不正常,能滑动,但默认没有滑动到当前input
红米note 正常,没有问题
小米4/5 不正常,不能滑动,无法使用

与手机操作系统和微信版本都有关系,上面的表格只是我这边的测试结果.
反正无论如何,微信自带的浏览器不会因为调出输入法就改变视窗的高度,这是最核心的问题.

思路


项目已经做好了,我现在只能打个补丁上去,通篇的解决这个该死的兼容性问题.项目中采用了jquery2版本.因此,这个补丁使用jquery语法来写.
  1. 要将当前焦点的文本框调整到可视区域
  2. 要给页面尾部增加空间,以抵消输入法的高度占据的空间
  3. 考虑性能,只能给微信使用,其他浏览器不执行.

开工


首先找来一段判断是否在微信浏览器的代码,如下:
// 判断是否是微信
function is_weixn(){  
    var ua = navigator.userAgent.toLowerCase();  
    if(ua.match(/MicroMessenger/i)=="micromessenger") {  
        return true;  
    } else {  
        return false;  
    }  
}

考虑了一下我的项目中,所有出现这个问题的地方,都是使用了input标签.但是,并非所有的input标签都需要调用出输入法,比如按钮和多选框等.因此,我自己构建了一个判断是否需要调用输入法的函数,如下:
// 判断是否为文本框
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
......显示全文...
    点击查看全文


上一篇文章      下一篇文章      查看所有文章
2016-03-29 22:59:18  
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 新闻资讯 小游戏 Chinese Culture 股票 三丰软件 开发 中国文化 网文精选 阅读网 看图 日历 万年历 2018年12日历
2018-12-11 4:29:39
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --