移动端H5解决键盘弹出时之后滚动位置发生变化的问题

前言

移动端H5在一个长屏的滚动过程中，一旦涉及到输入的文本框，弹出键盘后，滚动位置经常会发生变化，这个时候需要去捕获移动端键盘弹出前后的事件去做一下记录当前滚动状态并恢复的处理。

实现

由于ios和安卓的键盘弹出时的处理机制其实是不一样的，所以需要针对不用系统做相应的处理。

ios

ios主要就是监听document.body的focusin和focusout事件来处理。

function handleFocus() {
      // 此时为键盘弹出时
}

function handleBlur() {
      // 此时为键盘收起时
}

document.body.addEventListener('focusin', handleFocus);
document.body.addEventListener('focusout', handleBlur);

安卓

安卓的键盘弹出和收起会直接改变webview的高度，所以需要监听resize事件。所以安卓的如果要记录当前滚动位置还不能直接在事件监听中去做，需要在键盘还没调起来之前就提前记录下scrollTop的值，因为键盘一旦调起，webview的高度就会变了，记录的scrollTop就是不准确的。

   resizeHandler = (e) => {
        const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
        const activeElement = document.activeElement;
        if (resizeHeight < this.originHeight) {
            // 键盘弹起后逻辑
            if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA")) {
            }
        } else {
            // 键盘收起后逻辑
        }
    }

    componentWillMount() {
        const stateObj = sessionStorage.getItem('scrollbox_state');
        if(stateObj) {
            const obj = JSON.parse(stateObj);
            const { pageIndex, maxIndex } = obj;
            this.setState({
                pageIndex, 
                maxIndex
            })
        }
    }
window.addEventListener('resize', resizeHandler);