IOS微信唤起输入法后,弹层输入框无法点击问题

原创 木风622 随笔 vue 55阅读 12 天前 举报

做过移动端h5开发的小伙伴都知道移动端有一个很不爽的问题,就是点击按钮出现弹层后,弹层上有输入框,此时点击输入框输入内容的时候,ios和android会出现一些问题,甚至出现的问题很诡异,一时难以定位到到底是什么原因。近期在做h5开发时就遇到一个弹层输入框和输入法的问题,先上个图看下效果:

效果如上图,就是点击按钮之后出现弹层,里面会有需要填写的各种信息,pc浏览器模拟器上查看没有任何问题,移动端浏览器效果也OK,但是在ios微信端打开就完全崩塌了。当点击输入框键盘弹出后,不输入任何内容,点击键盘的完成,此时再点击输入框,弹层直接消失了!what fuck!!!

问题出现了就要查找问题原因了,开始真的是无从下手,为什么弹层会直接隐藏呢?在同事的帮助和提醒下,进行了如下尝试:

首先在代码里,将vue生命周期每一步和弹层隐藏事件分别写了alert,效果是键盘隐藏后再点击输入框的时候触发了 beforeDestroy和弹层隐藏的hide 事件,也就是直接触发了弹层的隐藏方法;

根据上面情况,首先想到的就是点击穿透问题,本项目是vue项目,经过试验在外层盒子添加了 @click.stop 之后,并没有什么卵用,效果依旧如此;

然后就卡住了。。。完全不知道是什么原因导致的,只好去度娘,但是网上也没有类似的问题,但是找到了其他问题的解决办法。

最先给启发的就是,ios调起键盘后,点击会发生错位或者点击不了内容,跟我遇到的问题十分相似,解决办法就是在 input 失去焦点时,触发window的滚动事件,滚动到顶部或者对应位置;根据这个思想,先尝试下滚动到顶部,简单代码如下:

保存~测试~堪称完美,键盘隐藏后再次点击弹层输入款能够再次弹出键盘,而且弹层不会消失,问题好像是解决了~继续测试,因为是多文本框输入,在键盘弹出情况下,连续点击不同输入框,问题出现了!!!因为每个输入框都设置了失去焦点滚动到顶部,页面会出现明显的跳动问题,非常影响用户体验。不过结合上面的方法继续思考问题也就比较好解决了,在每次失去焦点的时候,分别获得滚动距离,然后加定时器缓冲滚动就可以了,上代码:

再次进行测试,完全没有问题,在ios和android上都能够很好的展示;同时经过度娘,还发现这个方法还能够解决因为输入法弹起后,输入框失去焦点时导致的被撑起的页面无法正常恢复的问题。

问题解决了,可以说是之前根本没见过的问题,但是产生的本质原因还是因为键盘弹出后导致的点击错位问题,解决了这个问题,其他问题就迎刃而解了,最后附上参考的两个链接:

ios 调起键盘后点击不了 点击事件错位
IOS微信6.7.4输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复