微信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 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: ...
随机推荐
- centos 扩容
1. 查看挂载点信息: [root@localhost]# df -h 文件系统 容量 已用 可用 已用% 挂载点 /dev/mapper/centos-root 18G 15G 2.9G 84% / ...
- 奇怪的Excel导入问题,OleDbException (0x80004005): 未指定的错误
windows server 2008 的安全性做的比较好,首先进入系统盘(一般都是C:\),点击工具--文件夹选项--查看,把“使用共享向导(推荐)”的勾去掉,把“隐藏受保护的操作系统文件(推荐)” ...
- Java 同时返回多个不同类型的方法
Java 同时返回多个不同类型的方法 2016年12月02日 16:05:07 FXBStudy 阅读数:10045 前言:虽然对于这种需求不常用,且比较冷门,但是还是有其存在的价值,再次做一下整 ...
- Java知多少(1) 语言概述
Java语言是SUN(Stanford University Network,斯坦福大学网络公司)公司1995年推出的一门高级编程语言,起初主要应用在小型消费电子产品上,后来随着互联网的兴起,Java ...
- 稍稍解读下ThreadPoolExecutor
# 说说ThreadPoolExecutor ## 认识 先来看看它所在的架构体系: ```java package java.util.concurrent; public interface Ex ...
- Mysql系列三:Centos6下安装Mysql和Mysql主从复制的搭建
一.Centos6下安装Mysql 检测下系统有没有自带的mysql:yum list installed | grep mysql, 如果已经有的话执行命令yum -y remove mysql-l ...
- Angular4学习笔记(三)- 路由
路由简介 路由是 Angular 应用程序的核心,它加载与所请求路由相关联的组件,以及获取特定路由的相关数据.这允许我们通过控制不同的路由,获取不同的数据,从而渲染不同的页面. 相关的类 Routes ...
- 网络编程 -- RPC实现原理 -- Netty -- 迭代版本V2 -- 对象传输
网络编程 -- RPC实现原理 -- 目录 啦啦啦 V2——Netty -- 使用序列化和反序列化在网络上传输对象:需要实现 java.io.Serializable 接口 只能传输( ByteBuf ...
- ctrl c 中文字符到 vnc 里,中文字符已经被转码
为了测试程序对多语言字符的支持情况,我找来一段中文和北欧的文字,希望把这些文字上传到elasticsearch,并能正确显示. 首先测试了北欧文字,一切OK. 但是中文复制到 VNC 客户端(Linu ...
- windows下特殊字符无法用来命名
原则上可以利用键盘输入的英文字母.符号.空格.中文等均可以作为合法字符,但由于以下字符由系统保留它用,因此不能用在文件命名中: : / \ ? * “ < > | 注: ...