1. Ios系統(tǒng)bug，自動關聯(lián)手機驗證碼時，會復制重復的驗證碼

image.png

解決方法：

因為公司的驗證碼都是指定的位數(shù)，所以設置input的maxlength即可解決。

2.Ios系統(tǒng)當鍵盤彈起，再收回的時候，頁面底部會留白

image.png

解決方法

//這里監(jiān)聽鍵盤收起，然后滾動頂部
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系統(tǒng)遇到了焦點亂跑的問題。

每當點擊鍵盤的“完成”按鈕時，頁面看起來所有輸入框都失焦，然后點擊任意輸入框，焦點只會聚焦到上次完成時的下一個輸入框。

image.png

比如當我輸入完手機號，點擊鍵盤的“完成”按鈕，然后我想改一下姓名，但是點擊姓名的輸入框，焦點反而跑到了驗證碼那一欄。

這種神奇的的bug也是無語，將彈框的定位改成position:absolute就解決了該問題，看來Ios對fixed的兼容性并不是很友好,在移動端H5頁還是少用fiexd定位。