微信6.7.4 ios12 软键盘收回时页面不回弹,导致光标位置错乱,再次点击输入框区域时无法focus
https://developers.weixin.qq.com/community/develop/doc/00044ae90742f8c82fb78fcae56800
https://blog.csdn.net/qq_23370345/article/details/84757505
参考上述文章,可解决,补充多个输入框处理方法:
/* 问题: ios12+,微信6.7.4版本存在bug,键盘收回时,界面没有恢复,底下出现空白区域,并导致光标位置错乱,再次点击输入框区域时无法focus
解决方案: 当input失焦,键盘收回后,滚动一下页面就可以使页面恢复正常
补充: 当在手机号与验证码之间切换输入时,会同时触发前输入框的blur和后输入框focus,这个时候触发滚动,页面会出现较大跳跃,因此通过inFocus 和 setTimeout 判断,是切换input还是真正blur,真正blur的时候,再滚动页面
*/
//focus
iptFocus () {
this.errorMessage = '';
this.inFocus = true;
},
//blur
iptBlur () {
let this_ = this;
this_.inFocus = false;
setTimeout(function () {
if(this_.inFocus == false){
// 当input 失焦时,滚动一下页面就可以使页面恢复正常
this_.checkWxScroll();
}
},200)
}, checkWxScroll(){
var ua = navigator.userAgent.toLowerCase();
var u = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if(ua.match(/MicroMessenger/i) == 'micromessenger'&&!!u){//在iphone 微信中
// var osVersion = navigator.userAgent.match(/iPhone\sOS\s([\d\_]+)/i);
// var osArr = osVersion.length>=1? osVersion[1].split('_'):[];
// var newOS = osArr.length>=2 && (versionArr[0]>11)
// if(newOS){ //如果iphone版本号>=12
this.temporaryRepair();
// }
}
},
temporaryRepair(){
var currentPosition,timer;
var speed=1;//页面滚动距离
timer=setInterval(function(){
currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
currentPosition-=speed;
window.scrollTo(0,0);//页面向上滚动
// currentPosition+=speed; //speed变量
// window.scrollTo(0,currentPosition);//页面向下滚动
clearInterval(timer);
},1);
},
微信6.7.4 ios12 软键盘收回时页面不回弹,导致光标位置错乱,再次点击输入框区域时无法focus的更多相关文章
- Android隐藏软键盘收回软键盘
代码改变世界 Android隐藏软键盘收回软键盘 InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPU ...
- 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)
前言:微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白 最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失 ...
- uni-app 在input获取焦点(弹出软键盘后收起软键盘),页面不下滑,留下下方空白
加入收起软键盘时让页面回正 uni.pageScrollTo({ scrollTop: 0, duration: 0 });
- 使用WebView时软键盘遮挡H5页面解决办法
简单解决办法:在清单文件中添加 android:windowSoftInputMode="adjustResize" 此举可在软键盘弹出时,重新测量布局,保证不遮挡光标的所在位置. ...
- Layman 解决MUI 软键盘弹起挤压页面问题
问题:在使用mui和H5+进行移动端开发的时候,经常会遇见需要用户输入的情况 当input获取焦点弹起软键盘的时候,经常会遇见软键盘挤压页面.软键盘遮挡输入框等一系列问题: 原因:造成这种现象的原因是 ...
- android手机的微信H5弹出的软键盘挡住了文本框,如何解决?
window.addEventListener("resize", function () { if (document.activeElement.tagName == &quo ...
- android 软键盘不遮挡页面上的控件
只需要加android:windowSoftInputMode="adjustPan"就可以如: <activity android:name=".Enhance_ ...
- ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题
前端h5混合开发手机端ios 当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法: ...
- H5软键盘兼容方案
前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: ...
随机推荐
- 教你一招:笔记本安装mint18时,安装界面显示不全
近日在给自己的笔记本安装mint18时,安装界面显示不全,就是安装时到了分区界面后看不到下一步. 很无奈.... 于是胡乱摸索,得到解决的办法. 按住键盘上的ALT键,用鼠标向上拖动安装的界面,最好是 ...
- form表单下的button按钮会自动提交表单的问题
form表单下的button按钮会自动提交表单的问题 2017年01月05日 18:02:44 蓝色水 阅读数:18012更多 个人分类: asp.net form表单下的按钮在没有指定type类 ...
- fresco xml配置属性不起作用
在xml中配置加载等待图标,不起作用. 正确的如下: <?xml version="1.0" encoding="utf-8"?> <Line ...
- rqalpha探究 1 setup.py
rqalpha是难得几个好的做量化交易的开源项目,不过由于自己python用的实在不多,看起来还是觉得很复杂. 因此准备抽取出框架,从最简单的搭建. 思路 从setup着手,看一下如何建立一个发布工程 ...
- 设置gem源,解决下载慢的问题
问题解决的最好方法方法 使用google的DNS 8.8.8.8 / 8.8.4.4 另一种解决方式 修改rubygems的source源 $ gem source -r http://rubygem ...
- 关于HTTP请求返回417 “Expectation Failed”
在使用HttpClient默认情况下做POST的时候, HttpClient并不会直接就发起POST请求, 而是会分为俩步, 1.发送一个请求, 包含一个Expect:100-continue, 询问 ...
- struts建立工程helloworld
Java web环境:Tomcat + Jdk +eclipse java EE 创建一个能运行的java web工程,记得勾选上web.xml 下载struts库,目前最新2.5-2.16 all. ...
- mongodb查询数据库中某个字段中的值包含某个字符串的方法
正则表达式最能解决: 例如: db.getCollection(.*$/}) 这里主要是注意正则表达式要写对,该转义的注意转义,否则报错.
- 【Oracle-PLsql】使用存储过程,利用table集合类型开发复杂业务报表
在一般的项目中,都需要开发一些报表,少则几个字段,多则几十个字段,需要关联的表可能多达十几.几十张表,如果想要使用一个SQL语句将这几十张表关联起来 查询所需要的字段,当你听到这里的时候,你的脑子可能 ...
- flume 1.8 安装部署
环境 centos:7.2 JDK:1.8 Flume:1.8 一.Flume 安装 1) 下载 wget http://mirrors.tuna.tsinghua.edu.cn/apa ...