移動端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);