文档章节

ios系统在微信浏览器中的bug-键盘弹出再收起后,界面点击区域失效

 醉雨
发布于 09/06 11:40
字数 636
阅读 34
收藏 0
iOS

最近ios发布新版本系统12.1,随着部分用户的系统更新,一些问题也渐渐暴露出来。。。

公司做个活动页,在ios系统中弹出登录界面,在键盘弹出再收起后,反应点击区域会无效

在H5端是没法监控键盘的弹出与收起的,resize事件触发的机型极其有限,何况我在ios中实测没有触发,安卓反而可以。因为安卓弹起键盘时会修改视窗的大小,但是ios并不会,如果你在ios上设置一个100%高度的body,弹起键盘后你会发现这个body是可以上下滚动的,即100%高度的body超出了视窗。

如图所示,点击输入手机号之后,在收起键盘之后,验证码输入框点击区域都不触发事件了,如果往手机号上面的视图区域再点击,会触发验证码等点击事件

推测是body没有正确重新渲染,导致点击事件不处于body内而无法触发。所以再正确推回来应该就可以解决了

(/iphone|ipod|ipad/i.test(navigator.appVersion)) && document.addEventListener('blur', (e) => {
       
   document.body && (document.body.scrollTop = document.body.scrollTop);

    }, true)

在input输入框失去焦点的钩子中设置滚动到原有位置(document.body.scrollTop = document.body.scrollTop),触发浏览器的重绘,使的错误的渲染回复正常,滚动位置也不会有改变,没有影响体验。

以为问题就此解决,但是又有新的问题,如果点击手机号输入框之后,再点击验证码输入框,视图会往下又立马往上,感觉体验有点怪怪的。

修改代码

var iscanscrollpage = false; 

(/iphone|ipod|ipad/i.test(navigator.appVersion)) && document.addEventListener('blur', (e) => {
		 // 这里加了个类型判断,因为a等元素也会触发blur事件
		if(['input', 'textarea'].includes(e.target.localName)) {
			iscanscrollpage = true;

			setTimeout(function() {
				if(iscanscrollpage) {
					document.body && (document.body.scrollTop = document.body.scrollTop);
				}
			}, 200);
		}

	}, true)

$("#userphone").focus(function() {
        iscanscrollpage = false;

    });
$("#logincode").focus(function() {
        iscanscrollpage = false;
    });

延迟200ms执行,主要用iscanscrollpage来判断是否切换输入了输入框,测试解决问题。

补充:用document.body.scrollIntoView(false)方法也可以

 

© 著作权归作者所有

粉丝 3
博文 19
码字总数 11765
作品 0
朝阳
高级程序员
私信 提问
ios 最新系统bug与解决——微信公众号中弹出键盘再收起时,原虚拟键盘位点击事件无效

最近ios发布新版本系统12.1,随着部分用户的系统更新,一些问题也渐渐暴露出来。。。 公司用户反映微信公众号出现了点击无效的bug!!测试调查发现,只有iphonex、iphone6,ihpone7等部分机型...

ZoenLeo
2018/12/06
0
0
IOS12开发者预览版第二版使用评测

     手头有一部iPhone 6s Plus,因为之前看同学和朋友们升到IOS 11后手机变得非常卡顿所以没有升级。最近偶然看到IOS 12针对旧机型做了性能优化,号称提升70%相机打开速度、50%键盘显示...

张旭乾
2018/06/23
0
0
周记3——解决fixed属性在ios软键盘弹出后失效的bug

  这周在做空间(“类似”qq空间)项目。首页是好友发表的说说,可以针对每条说说进行评论,评论框吸附固定在屏幕底部。此时,Bug来了...在ios上,软键盘弹出后fixed属性失效了。后来发现,...

辛月
2018/08/19
0
0
常见的移动端H5页面开发遇到的坑和解决办法

手机共通问题 问题一:用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经研究发现是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页字会非常小,所以苹果...

webmirror
2018/05/02
0
0
iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案

https://www.haorooms.com/post/iosfixedinput 做touchweb开发的时候,做头疼的是,电脑上面时候好的,有些手机上面也是好的,个别手机和浏览器出现问题,对于这些,只能慢慢调试,找问题。 ...

壹峰
2018/12/26
279
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
14
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
15
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部