移动端输入框与键盘兼容问题

（1）input标签在IOS上唤起软键盘，键盘回收后页面不回落。
解决办法：监听input的focus事件，触发后将scrolltop设置为0.

document.addEventListener(‘focusout’, function () {
    document.body.scrollTop = 0
})

（2）唤起软键盘后遮挡输入框
解决办法：获取聚焦的元素并检验是否是input或者textarea，是的话则调用scrollIntoView方法。

document.addEventListener(‘resize’, () => {
    if (document.activeElement.tagName == ‘INPUT’ || document.activeElement.tagName == ‘TEXTAREA){
    setTimeout(() => {
        document.activeElement.scrollIntoView()
    }, 0)
}})

3）唤起键盘后，原来position:fixed; bottom:0; 元素被键盘顶起。
解决办法：监听window的resize事件，事件触发后，将fixed元素隐藏，键盘收回时再进行显示。（可以根据触发事件前后clientHeight高度进行判断）

let clientHeight = document.documentElement.clientHeight;
document.addEventListener(‘resize’, () => {
    let bodyHeight = document.document.clientHeight;
    let ele = document.getElementById(‘fixedEle’);
    if (!ele) return;
    if (clientHeight > bodyHeight) {
        ele.style.display = ‘none’
    } else {
        ele.style.display = ‘block’
    }
})