微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo
微信自带浏览器被输入法阻挡文本框的 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标签都需要调用出输入法,比如按钮和多选框等.因此,我自己构建了一个判断是否需要调用输入法的函数,如下:
// 判断是否为文本框
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相关推荐
- 解析——详细解读微信内置浏览器不支持下载APK(APP)软件的解决方法
需求描述 目前的APP基本都支持二维码扫描下载.由于微信现在是主流的聊天软件,90%的用户都是通过微信分享APP的,再从分享的链接下载app.但是微信会自动屏蔽含安装包文件下载的链接,导致用户在微信内 ...
- 微信内置浏览器不支持下载APK(APP)软件的解决方法
微信被认为是目前最具营销价值的营销渠道之一,原因很简单,微信是目前超高活跃度的app稳稳第一名,但是在微信中点击app下载链接,都是无法下载app的.因为腾讯为了自身利益,屏蔽了其他app直接在微信中 ...
- 详细解读微信内置浏览器不支持下载APK(APP)软件的解决方法
做微信营销活动或者APK下载推广时候,域名被经常被封,如何做到微信中正常使用呢?这就要借助一些工具来实现有效的操作. 先来认识一下微信屏蔽的原理.整理如下:微信屏蔽的原理第一是系统的自动检测,第二是微 ...
- php 206实现微信浏览器,PHP实现限制页面只能在微信自带浏览器访问的代码
PHP实现限制页面只能在微信自带浏览器访问的代码 发布于 2015-02-15 11:58:02 | 142 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hype ...
- php设置只能在微信打开,PHP如何限制页面只能在微信自带浏览器访问?
限制程序只能在微信里面浏览,下面是PHP限制页面只能在微信自带浏览器访问的代码. 为了防止自己辛辛苦苦做的webapp被人copy,都想限制程序只能在微信里面浏览,虽然下面实现了这个功能,单都是小菜, ...
- 手机 html5 返回 页面不刷新,微信自带浏览器物理返回不刷新问题
问题描述与需求 非单页面应用: 在页面A,通过get方式进入页面B之后再回到页面A,这个时候微信iOS版页面不刷新,安卓版微信刷新页面 ---> 所有物理返回都必须强制刷新重新进入页面: 在页面 ...
- [html] android手机的微信H5弹出的软键盘挡住了文本框,如何解决?
[html] android手机的微信H5弹出的软键盘挡住了文本框,如何解决? window.addEventListener("resize", function () {if ...
- Edge/IE浏览器主页被篡改为360导航的快捷解决方法
Edge/IE 浏览器主页被篡改为360导航的快捷解决方法 1.打开自带的电脑管家 找到浏览器保护 打开页面如下 2.同时打开360找到主页防护 打开页面如下,按要求操作 1.打开自带的电脑管家 找到 ...
- C语言w10输入法打不出中文,Win10系统使用微软输入法打不出汉字的解决方法
Win10系统使用微软输入法打不出汉字该如何解决?在Win10系统中,默认自带有微软拼音输入法,方便我们输入文字,但是有不少用户在打开浏览器网页的时候,使用微软拼音输入法打字的时候只显示输入的英文字母 ...
最新文章
- TensorFlow练习12: 判断男声女声
- 康奈尔Nature论文:一种使用反向传播训练的深度物理神经网络
- ssrf 服务器端请求伪造 简介
- python保留字的基本含义-python 33个保留字是什么意思
- python多线程之threading
- Java自学手记——servlet3.0新特性
- MySQL Workbench 5.2.45 GA 发布
- matlab玫瑰,网上收到的用matlab画玫瑰花的代码怎么不行啊,报告错误,求大神
- spark需要maven管理吗_使用Eclipse编写Spark应用程序(Scala+Maven)
- 基于 MVP+RxJava2+Retrofit2 的应用—熊猫眼
- CANFD和CAN的区别简介
- 自强不息系列之Python 选择排序
- [blockchain-042]eos 硅谷ecs docer编译 mongo存储
- 少儿学编程系列 --- 如何让ChatGPT使用turtle画画
- RED5学习(二)——第一个red5项目
- 一分钟了解“#include命令是干啥的”
- ARM嵌入式Linux系统设计与开发
- SEO 查看网站权重的工具
- 卡西欧将发布紧凑型G-SHOCK新品,为锻炼和日常使用提供便利
- JVM性能调优篇07-阿里巴巴Arthas工具详解