微信浏览器在版本6.7.4及以上会有这个bug:页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景,触摸到滚动条会消失恢复!

解决代码

后台框架嵌入iframe的情景,iframe内部页面输入框唤醒软键盘,控制顶层window滚动

var wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
if(wechatInfo){
$("input,textarea").blur(function(){
var currentPosition,timer;
var speed=1;//页面滚动距离
timer = setInterval(function(){
currentPosition = $('window.top').scrollTop();
currentPosition-=speed;
window.top.scrollTo(0,currentPosition);//页面向上滚动
currentPosition+=speed; //speed变量
window.top.scrollTo(0,currentPosition);//页面向下滚动
clearInterval(timer);
},1);
})
}

普通页面

if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面
var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
if (ua.match(/MicroMessenger/i) == "micromessenger") {
//在微信中打开
$("input,textarea").blur(function(){
var currentPosition,timer;
var speed=1;//页面滚动距离
timer=setInterval(function(){
currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
currentPosition-=speed;
window.scrollTo(0,currentPosition);//页面向上滚动
currentPosition+=speed; //speed变量
window.scrollTo(0,currentPosition);//页面向下滚动
clearInterval(timer);
},1);
})
}
}

页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景的更多相关文章

  1. 页面的div中有滚动条,js实现刷新页面后回到记录时滚动条的位置

    当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条:每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行.如下: ...

  2. ios 最新系统bug与解决——微信公众号中弹出键盘再收起时,原虚拟键盘位点击事件无效

    最近ios发布新版本系统12.1,随着部分用户的系统更新,一些问题也渐渐暴露出来... 公司用户反映微信公众号出现了点击无效的bug!!测试调查发现,只有iphonex.iphone6,ihpone7 ...

  3. 征信报告页面的input验证收集

    https://ipcrs.pbccrc.org.cn/ function checkLoginName() { var loginName = $.trim($("#loginname&q ...

  4. h5页面ios键盘弹出收起后页面底部留白问题

    <input placeholder="验证码" type="tel" v-model="verify" maxlength=&quo ...

  5. IOS微信点击input弹出输入法,关闭后页面留白解决方案

    场景:IOS用微信点击input框弹出输入法后 不管你是输入信息,还是不输入直接点完成关闭输入法,都会导致页面被挤上去后产生留白,从而改变页面布局             解决方法: 给input添加 ...

  6. 移动端 mui框架中input输入框或任何输入框聚焦后页面自动上移

    一.mui框架中点击input后,安卓手机弹出自带的输入键盘时,页面自动上移 实现方法: (1)只要把input标签放在mui-content这个类里面就可以了 <div class=" ...

  7. javascript笔记——点击按钮(或超链接)如何跳转到另外一个页面并执行目标页面的js函数

    页面跳转同时执行js代码$(function(){});url参数传递 标题的前半部分其实不必赘述,按钮也可以换成超链接.. 假设是需要在A页面上的一个按钮,点击后跳转到B页面,传一些参数后且并B页面 ...

  8. UWP webview 键盘bug,回退页面,键盘会弹一下。

    最新项目发现一个关于Webview的键盘bug. 具体问题:当点击Webview 网页里面input之类的东东,输入键盘会弹出来,这个时候,按回退键,键盘会收起来,再按回退键,界面会退到前一个页面,但 ...

  9. 微信公众号页面的web页面键盘弹起问题

    今天开发的过程中,遇到了一个小问题,是这样的,  UI的设计稿中有个底部的按钮是相对于屏幕定位的,但是这个页面还有一个输入框:具体情况请看下图: 这就造成了当我们输入框获取焦点的时候,键盘弹起,下面的 ...

随机推荐

  1. 关于selenium的8种元素定位

    selenium中有八种元素定位,分别是:id,name,class_name,tag_name,link_text.partial_link_text.xpath.css 简单的定位可以用 id.n ...

  2. 组件或者dom的特殊属性

    key:用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes. 常用姿势: 1.结合 v-for,有相同父元素的子元素必须有唯一key. <ul> <li ...

  3. vue适配移动端px自动转化为rem

    1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main. ...

  4. HtmlWebpackPlugin用的html的ejs模板文件中如何使用条件判断

    折腾: [已解决]给react-hot-boilerplate中的index.html换成用HtmlWebpackPlugin自动生成html 期间,已经有了思路了,但是不知道如何在ejs的html中 ...

  5. Spring Tools4

    Spring Tools4是一个集成了STS插件的Eclipse,所以下载之后就不需要再下载eclipse. 访问 https://spring.io/tools/ 点击“Download STS4 ...

  6. linux常用基础命令(一)

    Rz命令 rz命令本地上传文件到服务器: rz在弹出的框中选择文件,上传文件 sz命令 sz命令发送文件到本地: Sz文件名 例:将文件file1 Sz file1 Tomcat启动/关闭命令 比如t ...

  7. 五 Zabbix全网监控

    监控的作用 我们的职责   1.保障企业数据的安全可靠.   2.为客户提供7*24小时服务.   3.不断提升用户的体验.在关键时刻,提前提醒我们服务器要出问题了当出问题之后,可以便于找到问题的根源 ...

  8. java获取application.properties和application.yml配置文件信息

    public static void main(String[] args) { String result=getProjectConfig("max-file-size"); ...

  9. Integer.valueOf()与Integer.parseInt()区别

    Integer.parseInt()和Integer.valueOf()有本质区别,具体如下列: Integer.parseInt()把String   型转换为Int型,  Integer.valu ...

  10. Moq 在.net Core 单元测试中的使用

    Moq,主要用来伪造接口的实现类,实现方法,属性 moq The most popular and friendly mocking framework for .NET What? Moq (pro ...