微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo
2017-07-19 10:36
337 查看
微信自带浏览器被输入法阻挡文本框的 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
相关文章推荐
- 微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo
- ubuntu自带的ibus输入法问题解决方法
- 浏览器后退按钮导致jquery动态添加的select option值丢失的解决方法
- 关于浏览器和微信顽固缓存的解决方法
- 在微信的浏览器中下载手机安装文件 解决方法
- Webview网页中文本框不弹出输入法 没有得到焦点解决方法
- 使用jquery的load方法设计动态加载,并解决浏览器前进、后退、刷新等问题
- defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
- 文本框限制输入(半角,全角互转),以及控制输入法问题,解决方法整合
- js replace 全局替换 以表单的方式提交参数 判断是否为ie浏览器 将jquery.qqFace.js表情转换成微信的字符码 手机端省市区联动 新字体引用本地运行可以获得,放到服务器上报404 C#提取html中的汉字 MVC几种找不到资源的解决方式 使用Windows服务定时去执行一个方法的三种方式
- defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
- defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
- jQuery中的bind绑定事件与文本框改变事件的临时解决方法
- Vue页面在苹果设备中微信(X5)浏览器title不改变的解决方法
- 《解决微信内置浏览器返回上一页强制刷新问题方法》
- JQuery 的 ajax 出现Origin null is not allowed by Access-Control-Allow-Origin 解决方法
- video 标签在微信浏览器的问题解决方法
- 解决某些服务器只允许微信自带浏览器
- jquery uploadify上传文件插件导致浏览器崩溃问题解决方法
- 微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法(转)