ios系统bug踩坑

1. Ios系统bug，自动关联手机验证码时，会复制重复的验证码

image.png

解决方法：

因为公司的验证码都是指定的位数，所以设置input的maxlength即可解决。

2.Ios系统当键盘弹起，再收回的时候，页面底部会留白

image.png

解决方法

//这里监听键盘收起，然后滚动顶部
document.body.addEventListener('focusout', () => { 
  //软键盘收起的事件处理 
 if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent))
    //键盘收齐页面空白问题 
    document.body.scrollTop = document.body.scrollHeight; 
  }
})

以上方法确实可以解决问题，但是我的页面里使用了swiper插件做整屏切换，且第二屏可滚动查看，设置document.body.scrollTop会使第二屏页面滚动到最顶部，且有多个输入框，所以我用了另一个方法：

$('.input_text'').on('focusout', function (e) {
    $(this).removeClass('focus')
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
      setTimeout(function () {
        if(!$('.focus').length){
          document.body.scrollTop = 0;
          document.documentElement.scrollTop = 0;
        }
      },100)
    }
 $('.input_text'') .on('focus',function () {
    $(this).addClass('focus')
  })

3.在H5页面上fixed定位了一个弹框，但是在ios 12.1系统遇到了焦点乱跑的问题。

每当点击键盘的“完成”按钮时，页面看起来所有输入框都失焦，然后点击任意输入框，焦点只会聚焦到上次完成时的下一个输入框。

image.png

比如当我输入完手机号，点击键盘的“完成”按钮，然后我想改一下姓名，但是点击姓名的输入框，焦点反而跑到了验证码那一栏。

这种神奇的的bug也是无语，将弹框的定位改成position:absolute就解决了该问题，看来Ios对fixed的兼容性并不是很友好,在移动端H5页还是少用fiexd定位。