移动端 IOS的两个小坑

最近因为项目需要，要在微信端做几个简单的页面。虽然页面比较简单，但是也在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);
}
复制代码

转载于:https://juejin.im/post/5cf87e4e518825276a285bac