微信6.7.4 ios12 软键盘收回时页面不回弹,导致光标位置错乱,再次点击输入框区域时无法focus

时间:2022-09-22 08:06:42

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. 【转载】兼容php5,php7的cURL文件上传示例

    转载来自: http://www.huanlinna.com/2016/06/25/coding/php5-php7-upload-demo-via-curl.html https://segment ...

  2. PHP之:随机抽取一个数&amp&semi;&amp&semi;随机函数

    撰写日期:2016-7-20 16:00:24 有5个数:1 4 7 9 6 用PHP实现随机抽取5个数中的其中一个 方法一: <?php $test = array(1,4,7,9,6);// ...

  3. 整理ORACLE数据库备份常用术语

    本文将讲述在备份是常用的数据库相关术语以及业界定义的专业术语,供大家参考和学习. 数据库相关术语: (1)冷备份: 冷备份是将数据库关闭之后,将数据文件.联机日志文件.控制文件拷贝到其他地方进行备份. ...

  4. cert

  5. mysql 安装过程中的错误:my-template&period;ini could not be processed and written to XXX&bsol;my&period;ini&period;Error code-1

    安装mysql的过程中,在最后配置mysql时,提示错误:Configuration file tmeplate E:\编程\MySQL\my-template.ini could not be pr ...

  6. PKUWC 2018 滚粗记

    day0 上午居然考了一场考试,大爆炸,攒了一波RP,下午也没有心思去落实题目,而是一心去搞颓废,到了晚上看时间还早,于是就看了一波上午考试的Solution,懵逼.jpg day1 上午考数学,前一 ...

  7. SSM项目整合Quartz

    一.背景 SSM项目中要用到定时器,初期使用Timer,后来用spring 的schedule,都比较简单,所以功能比较单一而且他们不能动态的配置时间.后来就研究quartz,准备整合到项目中.Qua ...

  8. Ruler&period;java

    /****************************************************************************** * Compilation: javac ...

  9. java实现simhash算法

    一个牛人分享的,放在github上,用java实现,网络上还有很多用ruby写的   https://github.com/commoncrawl/commoncrawl/blob/master/sr ...

  10. 在springmvc中无法使用&commat;value&lpar;&rpar;注解

    折腾了一下午,试了很多解决办法,就是死活不能扫描到properties文件.本来打算使用软编码的,尝试更改了全部jar包版本,还是无法解决. 后面想到了,spring和springmvc容器的加载顺序 ...