移动端监听软键盘弹出和收起，区分Android和IOS

[xianzou]

移动端监听软键盘弹出和收起，区分Android和IOS

实现监听移动端软键盘弹出和收起，并可以获取到软键盘的高度,IOS可以采用底部放置输入框来实现位置差的变化

代码

export const useKeyboard  = (nodeClassName, keyWordUp, keyWordDown) => {

    const originHeight = document.documentElement.clientHeight || document.body.clientHeight;
    const screenHieght = useRef(0);
    // 上一次键盘弹起之后的屏幕的值
    const prevHieght = useRef(0);

    const allNodeClassName = document.querySelector(nodeClassName);

    if (allNodeClassName){
        screenHieght.current = allNodeClassName.getBoundingClientRect().top;
        // showToast(`${screenHieght.current}-nodeTop`);
    }

    const iosFocusinHandler  = () => {
        // 键盘展开
        setTimeout(() => {
            const nodeHeight = document.querySelector(nodeClassName);

            if (nodeHeight){
                const nodeTop = nodeHeight.getBoundingClientRect().top;
                const sum = screenHieght.current - nodeTop;

                prevHieght.current = sum;
                keyWordUp();
            }
        }, 300);
    };
    const iosFocusoutHandler  = () => {
        // 键盘收起
        setTimeout(() => {
            keyWordDown();
            prevHieght.current = 0;
        }, 100);
    };
    const resizeHandler = () => {
        const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;

        if (resizeHeight < originHeight) {
            // 键盘弹起后逻辑
            const val = originHeight - resizeHeight;

            prevHieght.current = val;
            setTimeout(() => {
                keyWordUp(val);
            }, 100);
        } else {
            // 键盘收起后逻辑
            setTimeout(() => {
                keyWordDown(prevHieght.current);
                prevHieght.current = 0;
            }, 100);
        }

    };

    useEffect(() => {
        const terminal = getTerminalType();

        if (terminal === 'IOS'){
            document.body.addEventListener('focusin', iosFocusinHandler);
            document.body.addEventListener('focusout', iosFocusoutHandler);
        }
        if (terminal === 'ANDROID'){

            window.addEventListener('resize', resizeHandler);
        }
        return () => {
            if (terminal === 'IOS'){
                document.body.removeEventListener('focusin', iosFocusinHandler);
                document.body.removeEventListener('focusout', iosFocusoutHandler);
            }
            if (terminal === 'ANDROID'){
                window.removeEventListener('resize', resizeHandler);
            }
        };
    }, []);//eslint-disable-line
};

使用

import { useKeyboard } from '@/utils/hooks';

const List =() => {
    useKeyboard('.commitWrap', keyWordUp, keyWordDown);
    return (
    	<div>sss</div>
    )
}