移动端 IOS的两个小坑

时间 2019-12-05

标签移动 ios 两个小坑栏目无线繁體版

原文原文链接

最近由于项目须要，要在微信端作几个简单的页面。虽然页面比较简单，可是也在iOS 的适配上发现了两个小坑。但愿经过这篇文章来记录下这两个问题的解决方案，也但愿能帮到你们。vue

1. IOS 12 验证码bugjquery

IOS 12新增了一个功能，就是收到短信验证码以后能够自动填充。可是会有一个bug,就是会自动填充两次（以下图）。ios

对于这个bug目前暂时是没有完美的解决方案的。暂时的解决方案就是限制输入框的长度。例如是4位验证码的话，验证码的输入框就限定最大长度为4位，若是是6位验证码就限定最大长度为6位。浏览器

2.IOS 微信浏览器兼容bugbash

目前ios 存在一个bug就是在文本框输入内容，输入完成之后收起软键盘后，页面的高度不能恢复。可能提及来比较抽象，具体的问题能够看下图：微信

这是一个简单的小demo,具体的问题大概就是这个样子。而对于这个问题的解决思路也很简单，监听每一个输入框的blur事件，而后经过window.scroll()将页面进行校准。具体的代码以下(因为我用的是vue,用原生js或者jquery的可自行修改一下代码)：ui

//判断是否微信浏览器
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);
}
复制代码