最近因为项目需要,要在微信端做几个简单的页面。虽然页面比较简单,但是也在iOS 的适配上发现了两个小坑。希望通过这篇文章来记录下这两个问题的解决方案,也希望能帮到大家。
1. IOS 12 验证码bug
IOS 12新增了一个功能,就是收到短信验证码之后可以自动填充。但是会有一个bug,就是会自动填充两次(如下图)。
对于这个bug目前暂时是没有完美的解决方案的。暂时的解决方案就是限制输入框的长度。例如是4位验证码的话,验证码的输入框就限定最大长度为4位,如果是6位验证码就限定最大长度为6位。
2.IOS 微信浏览器兼容bug
目前ios 存在一个bug就是在文本框输入内容,输入完成以后收起软键盘后,页面的高度不能恢复。可能说起来比较抽象,具体的问题可以看下图:
这是一个简单的小demo,具体的问题大概就是这个样子。而对于这个问题的解决思路也很简单,监听每个输入框的blur事件,然后通过window.scroll()将页面进行校准。具体的代码如下(由于我用的是vue,用原生js或者jquery的可自行修改一下代码):
//判断是否微信浏览器isWeixinBrowser:function(){ let ua = navigator.userAgent.toLowerCase(); this.isWeixin = (/micromessenger/.test(ua)) ? true : false;},//ios bug修复scrollTo:function(){ if(!this.isWeixin) { return; } window.scroll(0, 0);}复制代码