[IOS & javascript] ios 이모티콘 키패드 height 조정하기 (emoji keypad window resize)

상황

앱에서 키패드를 이모티콘으로 변경했을때 height가 높아져 입력란이 가려짐 이슈

 

해결

 

1. window.visualViewport

window.resize를 해봤는데 앱이라 그런지 안됨.. 찾아보다가 window.visualViewport로 해결

간단하게 정리한 소스 !!

function resizeKeypad = () => {
    requestAnimationFrame(() => {
    	//필요한 함수 실행
    })
}

window.visualViewport.addEventListener("resize", resizeKeypad)

 

전체소스

$(function () {
    let flag = false;
    
    function handler(e) {
    	if (flag) return;
        flag = true;
        
        requestAnimationFrame(function () {
            flag = false;
            $(window).scrollTop(window.innerHeight); //스크롤 최하단으로 이동
        })
    }
    
    //혹시라도 visualViewport 없을 경우 대비하여 방어코드 추가
    if (window.visualViewport) {
    	//visualViewport 기준으로 resize가 일어나면 handler이벤트 실행
    	window.visualViewport.addEventListener("resize", handler);
    }
})

 

2. 입력박스에 focus 될때마다 scroll 최하단으로 이동

$(document).on("focus", "input", function () {
	setTimeout(function () {
    	window.scrollTo(0, window.innerHeight);
    }, 0)
})

 

focus 될때마다 최하단으로 이동하는건데 아무래도 스크롤 내리다가 입력박스 클릭하면 최하단으로 이동하기도 하고 1번 소스가 더 깔끔하고 사이드이펙이 적어보여서 1번으로 해결.