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. java中的数据加密1 消息摘要

    消息摘要(Message Digest) 又称为数字摘要(Digital Digest).它是一个唯一对应一个消息或文本的固定长度的值,它由一个单向Hash加密函数对消息进行作用而产生.如果消息在途中 ...

  2. Fixed Partition Memory Management UVALive - 2238 建图很巧妙 km算法左右顶点个数不等模板以及需要注意的问题 求最小权匹配

    /** 题目: Fixed Partition Memory Management UVALive - 2238 链接:https://vjudge.net/problem/UVALive-2238 ...

  3. 要是VISUAL STUDIO 2015带这些功能就好了

    visual studio 2015 正式版立即就要出来了,事实上我原来满期待微软能出一套完美的移植的ANDROID和IOS应用的技术方案,这样WIN10正式版出来后,有一套比較好的移植框架,大家能够 ...

  4. python中的selectors模块

    它的功能与linux的epoll,还是select模块,poll等类似:实现高效的I/O multiplexing,  常用于非阻塞的socket的编程中: 简单介绍一下这个模块,更多内容查看 pyt ...

  5. 【Oracle】ORA 01810 格式代码出现两次-转

    一.Oracle中使用to_date()时格式化日期需要注意格式码 如:select to_date('2005-01-01 13:14:20','yyyy-MM-dd HH24:mm:ss') fr ...

  6. java主线程等待所有子线程执行完毕在执行(常见面试题)

    java主线程等待所有子线程执行完毕在执行(常见面试题) java主线程等待所有子线程执行完毕在执行,这个需求其实我们在工作中经常会用到,比如用户下单一个产品,后台会做一系列的处理,为了提高效率,每个 ...

  7. [IR] Dictionary Coding

    [数据压缩]LZ77算法原理及实现 [数据压缩]LZ78算法原理及实现 Lempel–Ziv–Welch 年发表的论文<A Universal Algorithm for Sequential ...

  8. [IR] Extraction-based Text Summarization

    文本自动摘要 - 阅读笔记 自动文摘要解决的问题描述很简单,就是用一些精炼的话来概括整篇文章的大意,用户通过阅读文摘就可以了解到原文要表达的意思. 问题包括两种解决思路, 一种是extractive, ...

  9. Mercurial (hg) Hook : PHP Syntax Check , hg 代码检测 钩子

    用百度搜了一遍hg的hook教程,发现真的是太少了.公司目前正要用到这个,正好本人负责,So. 百度是个坑,少有的几篇文章,再加上善于发现的眼睛,发现TortoiseHg的UI操作都会在控制台显示动作 ...

  10. 单元测试以文件流的形势传参调用api进行测试

    [TestMethod] public void Test() { byte[] buffer;//文件转换为二进制流 string path = @"E:\aaa"; Encod ...