ios微信软键盘之殇
先说一下业务场景。
界面有弹窗，在弹窗内输入时，弹出软键盘输入短信验证码。验证成功后隐藏弹窗，弹出有复制按钮的弹窗。点击复制按钮，复制相关内容。
在开发这个功能的时候，有两个渠道，一个是支付宝h5,一个是微信h5。结果是微信IOS端出现了bug，弹出有复制按钮的弹窗后，点击复制按钮没有任何反应。
于是，我这个比较直的人就一直点，点点点，并且进行了计数，一开始，发现大概点了有一分钟后，界面没有卡了，点击复制按钮成功复制到了内容。我首先想到的是复制插件是不是有问题，查看了复制插件的源码，发现复制插件并没有设置什么时间，其他用到复制插件的地方也没有同样的问题，所以，排除是复制插件的问题。
由于卡顿时间的考虑吧。我想到了是不是哪些地方有setTimeout，setInterval的定时器导致卡顿，刚好也发现有个地方设置了时间定时器，并且在用不到这个时间定时器的时候没有清除时间定时器。于是，在用不到时间定时器的时候将这个定时器给取消了。但是，取消后，bug并没有消失。。。但是，经过多次测试，好像页面卡顿的时间缩小了！于是，找到了发短信验证码的时候，有个倒计时，当短信验证码验证成功的时候，这个倒计时没有取消，还在继续倒计时，于是，在验证成功的时候，取消了倒计时，然鹅，bug依旧存在。。。判定并不是时间定时器，以及计时器的原因导致。。。路漫漫其修远兮啊。。。
由于这里动画比较多，于是考虑是不是动画太多导致卡住了。又是网上一通搜索。什么ios微信animation卡顿掉帧，h5动画卡顿优化，还想到了是不是tranform过渡动画过快，导致卡顿。最后都不能找到任何相关的蛛丝马迹。。。。所以，这个想法也暂时排除，并且,复制按钮的时候所有动画也都结束了，应该排除这个想法。
又想是不是z-index的问题，复制按钮的弹窗z-index过低导致，于是设置一个极其大的z-index,这个想法也宣告失败。。。
好吧，这到底是个什么样的bug？我太南了。。。
痛定思痛，我回想了一遍流程。弹窗=>输入验证码=>隐藏验证码弹窗=>弹出复制按钮弹窗。突然，灵光一闪，输入验证码的时候需要弹出软键盘，ios的软键盘一直以来有个顽固的bug!H5 ios软键盘弹出后会导致撑起页面不下来！虽然这里并没有看到页面被撑起来的迹象，我之前解决过一次这样的bug，我只是抱着一试的想法，先将弹出软键盘的流程给去掉，直接弹窗=>隐藏验证码弹窗=>弹出复制按钮弹窗。在这个流程下，复制按钮并没有卡顿！离成功仅一步之遥！确认过眼神，这就是ios软键盘的锅！天呐，太坑爹了！于是，在验证完短信验证码的时候设置了window.scrollTo(0, 0);bug消失，天下太平。。。
最后的最后，终于解决了。。。。
总结一下，这个bug的痛点在于页面并没有出现撑起来的效果，而且涉及的东西比较多，给了它足够的隐藏空间。
ios微信软键盘之殇相关推荐
- ios获取软键盘完成事件
ios获取软键盘完成事件,通过判断input的onBlur事件即可
- 仿微信软键盘弹出与隐藏
仿微信软键盘弹出与隐藏,效果图如下: 实现输入框弹出,软键盘弹出,获取焦点,否则失去焦点. 首先在 AndroidManifest 文件的对应 Activity 中加入下面代码: android:wi ...
- IOS 自定义软键盘功能，修改换行键为发送键
IOS项目是使用混合模式开发,在开发聊天功能时:发现软键盘不能像QQ.微信那样,换行键不能变为发送:网上说是因为输入框类别导致:尝试过以后,还是不行:然后想到用IOS native解决: 先说一下,原 ...
- h5 ios中软键盘弹起后 fixed定位失效
position: fixed;在ios手机中会存在一个失效情况: 如果页面有输入框存在,点击输入框软键盘弹起后会发生一个现象: 1.针对当前内容高度小于屏幕高度时: 上下滑动页面时候,发现之前fix ...
- 解决h5底部输入框在ios被软键盘顶飞 软键盘消失还下不来
好吧,其实不是顶飞,准确点说应该是h5页面fiexed定位在底部的输入框在ios软键盘弹起的时候软键盘跟输入框有时会有一段悬空的距离,无法紧贴.在安卓机子上则没有这样的情况. 解决方法是通过h5的sc ...
- ios 弹起软键盘position: fixed；失效
<view class="stores-top"> <input type="text" placeholde ...
- 处理ios软键盘弹起和收起时页面滚动问题
处理ios软键盘弹起和收起时页面滚动问题 背景: 在开发添加主播功能时,页面底部需要弹出一个抽屉弹窗,点击抽屉上的输入框,会唤起软键盘,由于iOS的软键盘触发方式是将页面滚动,所以导致页面位置偏移 b ...
- h5 移动端 监听软键盘弹起、收起
前面一篇博客 h5 安卓 键盘弹起界面适配 修改webview高度提到了在adnroid中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化 window.onresize事件来做突破点的,但是i ...
- Android软键盘的全面解析，让你不再怕控件被遮盖
本文转载自:https://blog.csdn.net/l540675759/article/details/74528641 背景 1.Android软键盘这块从我入职到现在,是一个一直纠缠我的问题 ...
最新文章
- Android中的意图匹配--IntentFilter的作用
- Gartner：2015年SIEM（安全信息与事件管理）市场分析
- python c 语言接口,## 人生苦短我用python[0x08] 使用ctypes调用c语言接口 ##
- 施一公：带好学生，是特别要紧的事
- 初学者python笔记（re模块、正则表达式完全解析）
- 中国内镜超声针市场趋势报告、技术动态创新及市场预测
- ubuntu 搜狗输入法的安装
- json 插入数据_Oracle Database 20c:JSON功能增强
- 爆炸的符卡洋洋洒洒（01背包）
- 在 Ubuntu 中用 UFW 配置防火墙
- 安徽考区计算机水平考试试卷,安徽考区计算机水平考试试卷2011.6
- c语言实现61850协议,IEC61850开发库 libIEC61850提供了用C语言编写的IEC 61850 / MMS - 下载 - 搜珍网...
- 查询student表中姓童的学生情况
- CF与OF有什么区别？
- 使用Jmeter输出错误响应结果到日志
- PHP面向对象5-基本概念
- java小米面经_java小米面经，面试题整理(三面)
- C#实现改变图片的像素
- 手机上流行的各类谜语及谜底
- React+Redux技术栈核心要点解析（上篇）