移动端兼容问题(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事件来获取一次数据，解决无法获取数据问题。