最近一个项目快上线时,测试同学发现了一个奇怪的问题,华为p30Pro在微信浏览器里打开页面后拉起虚拟数字键盘后点击返回,返回上一页时页面下半部不显示内容,虚拟键盘占用的位置没有消失,经过缜密的调查发现了问题所在,这是微信的BUG,目前还未修复。
正常情况下,微信浏览器里使用系统的返回是先收起键盘,再返回一次时才回退到上一页。而H5里自定义的返回上一页是直接返回上一页,问题就出在这里,直接返回上一页时虚拟输入框占用的位置没有来得及消失。
知道问题在哪里就好办了,在自定义的返回上一页方法里去检测页面里是否有自己想找的那个输入框,如果有,就使用blur()方法手动让输入框失去光标,然后,这里是重点:写一个settimeout方法,时间给200毫秒就可以,具体自己测试,然后在里面放返回上一页的代码,比如window.history.back();给系统反应的时间。这样问题就解决了
解决华为安全键盘收回, 软键盘位置没收回的问题
于 2022-07-15 18:18:24 首次发布