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的更多相关文章

  1. Android隐藏软键盘收回软键盘

    代码改变世界 Android隐藏软键盘收回软键盘 InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPU ...

  2. 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)

    前言:微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白 最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失 ...

  3. uni-app 在input获取焦点(弹出软键盘后收起软键盘),页面不下滑,留下下方空白

    加入收起软键盘时让页面回正 uni.pageScrollTo({ scrollTop: 0, duration: 0 });

  4. 使用WebView时软键盘遮挡H5页面解决办法

    简单解决办法:在清单文件中添加 android:windowSoftInputMode="adjustResize" 此举可在软键盘弹出时,重新测量布局,保证不遮挡光标的所在位置. ...

  5. Layman 解决MUI 软键盘弹起挤压页面问题

    问题:在使用mui和H5+进行移动端开发的时候,经常会遇见需要用户输入的情况 当input获取焦点弹起软键盘的时候,经常会遇见软键盘挤压页面.软键盘遮挡输入框等一系列问题: 原因:造成这种现象的原因是 ...

  6. android手机的微信H5弹出的软键盘挡住了文本框,如何解决?

    window.addEventListener("resize", function () { if (document.activeElement.tagName == &quo ...

  7. android 软键盘不遮挡页面上的控件

    只需要加android:windowSoftInputMode="adjustPan"就可以如: <activity android:name=".Enhance_ ...

  8. ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题

    前端h5混合开发手机端ios  当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法: ...

  9. H5软键盘兼容方案

    前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: ...

随机推荐

  1. openCV函数

    1.cvInitFont ,, ); font 被初始化的字体结构体. font_face 字体名称标识符.只是Hershey 字体集( http://sources.isc.org/utils/mi ...

  2. 关于C#中的动态数组ArrayList

    在C#中,如果需要数组的长度和元素的个数随着程序的运行不断改变,就可以使用ArrayList类,该类是一个可以动态增减成员的数组. 一.ArrayList类与Array类的区别 ArrayList类实 ...

  3. Spark学习笔记——文本处理技术

    1.建立TF-IDF模型 import org.apache.spark.{SparkConf, SparkContext} import org.apache.spark.mllib.linalg. ...

  4. Web 文件上传 目录

    0. SpringMVC -- 梗概--源码--贰--上传 1. Web上传文件的原理及实现 2. Web文件上传方法总结大全 3. SpringMVC 文件上传配置,多文件上传,使用的Multipa ...

  5. vue跨域代理配置

    实际:http://a.com/b.php 代理:http://localhost/b.php 配置config/index.js proxyTable: { '/api': { target:'ht ...

  6. /usr/bin/ld: cannot find -lncurses是咋回事?

    你的系統是32位的還是64位的? 如果是32位的就用:sudo apt-get install libncurses5-dev 如果是64位的,就用:sudo apt-get install lib3 ...

  7. onems设备管理系统(TR-069和OMA)

    onems设备管理系统(TR-069和OMA) 沃克斯科技OneMS设备管理套件是一个全面的为服务提供商和企业提供自动配置和远程管理功能的设备管理解决方案.它利用现有的网络基础设施来自动化订购,预配置 ...

  8. day_6.22python多线程

    僵尸进程:子进程结束,父类未结束 孤儿进程:父类进程over.,子进程未结束 0号进程负责运行,1号进程负责生成,所有孤儿进程的收容所(孤儿进程:父类进程over)1号进程,永不结束! Linux: ...

  9. Python不支持函数重载

    函数重载与Python: 函数重载的好处就是不用为了不同的参数类型或参数个数,而写多个函数.多个函数用同一个名字,但参数表,即参数的个数和数据类型可以不同.调用的时候,虽然方法名字相同,但根据参数表可 ...

  10. thinkphp或thinkcmf 《文章编辑,文章添加》 访问另一个表的分类,添加入另一个表时将id值以(,)逗号分隔储存,编辑时以(,)逗号分隔并且相等的id值被选中

      首页 显示 的控制器//网贷评级 public function grade(){ $archives = $this->archives_model->where(array('de ...