모바일 하이브리드 서비스에서 키보드 감지하기.

 appKeyboardState.js

(function () {
    const VIEWPORT_VS_SCREEN_HEIGHT_RATIO = 0.75
    const HEIGHT_DELTA_THRESHOLD = 100
    let initialInnerHeight = window.innerHeight
    let keyboardVisible = false
    let listenersAttached = false

    function detectKeyboardState() {
        const visualHeight = window.visualViewport?.height * window.visualViewport?.scale || window.innerHeight
        const screenHeight = window.screen.height
        const ratio = visualHeight / screenHeight
        const heightDelta = initialInnerHeight - window.innerHeight
        const isKeyboardVisible = ratio < VIEWPORT_VS_SCREEN_HEIGHT_RATIO || heightDelta > HEIGHT_DELTA_THRESHOLD

        if (isKeyboardVisible && !keyboardVisible) {
            keyboardVisible = true
            console.debug('keyboard opened')
            document.dispatchEvent(new Event('keyboardDidShow'))
        } else if (!isKeyboardVisible && keyboardVisible) {
            keyboardVisible = false;
            console.debug('keyboard closed')
            document.dispatchEvent(new Event('keyboardDidHide'))
        }
    }

    function attachKeyboardListeners() {
        if (listenersAttached) {
            return
        }

        const inputs = document.querySelectorAll('input, textarea')
        inputs.forEach((el) => {
            el.addEventListener('focus', () => setTimeout(detectKeyboardState, 300))
            el.addEventListener('blur', () => setTimeout(detectKeyboardState, 300))
        })

        if ('visualViewport' in window) {
            window.visualViewport.addEventListener('resize', detectKeyboardState)
        }

        window.addEventListener('orientationchange', () => {
            setTimeout(() => {
                initialInnerHeight = window.innerHeight
            }, 500)
        })

        listenersAttached = true
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', attachKeyboardListeners)
    } else {
        attachKeyboardListeners()
    }

    window.KeyboardStateMonitor = {
        init: attachKeyboardListeners,
        isVisible: () => keyboardVisible,
    }
})()

 
사용 예시

// 1. 키보드 열림/닫힘 이벤트 리스닝
document.addEventListener('keyboardDidShow', () => {
    console.log('키보드가 열렸습니다!');
    // 원하는 동작 수행
});

document.addEventListener('keyboardDidHide', () => {
    console.log('키보드가 닫혔습니다!');
    // 원하는 동작 수행
});

// 2. 현재 키보드 상태 확인
if (window.KeyboardStateMonitor.isVisible()) {
    console.log('키보드가 현재 열려있습니다');
}