移動端兼容問題(5)

很久沒有總結了，繼續發佈遇到一些兼容問題，歡迎溝通。

ios 鍵盤輸入後，頁面偏移，導致頁面響應區域無法點擊

進行輸入操作後，如圖區域是無法點擊的。

解決方法

if (/(iPhone|iPad|iPod|iOS)/i.test(window.navigator.userAgent)) {
      document.activeElement.scrollIntoViewIfNeeded(true)
    }

20191016補充：
常規文檔流中，使用上速方式即可或者修改爲下列方式:

if(isIOS()) {
    document.activeElement.scrollIntoView(false)
}

脫離文檔流可以採用下列方式:

let scrollY = 0
const handleBlur = function() {
    window.scrollTo(0, scrollY)
}

const handleFocus = function() {
    scrollY = window.scrollY
}
document.querySelector('input').addEventListener('blur', handleBlur)
document.querySelector('input').addEventListener('focus', handleFocus)

通過記錄位置手動轉化即可。

原因:

在ios下，如果一個input在fixed定位下，就會出現該問題，webkit問題地址，根據問題描述若是父級元素不在fixed下則可以避免。

https://hackernoon.com/how-to...

ios下 輸入法推薦文字無法觸發change或者input事件。

解決方式:
通過輸入框的 onblur事件來獲取一次數據，解決無法獲取數據問題。