[ IOS ] WebView 키보드(키패드) 영역 문제

[ IOS ] WebView 키보드(키패드) 영역 문제

 

안녕하세요. 갓대희 입니다. 이번 포스팅은 [ IOS WebView 키패드 영역 밀림 현상 해결 ] 입니다. : ) 

 

이슈 현상

1. 환경

 - 해당현상은 IOS 14 이상의 경우에 개선 된 것으로 보이며, 그 미만 버전 즉 OS 12, 13 등의 버전에서 보이는 현상 이였다.

 

2. 내용

 - input 영역을 클릭하여 focus가 되었을때 키보드가 올라 온다.

 - 다음과 같은 화면이 있다고 하였을때 A 하단의 input 영역을 클릭 한다고 가정 하자.

 - 클릭시 다음과 같이 화면이 밀리면서 키패드가 올라오도록 기획된 경우.

 - 이 경우는 키패드가 올라오면서 html element 영역을 키패드 높이 만큼 같이 올려 준다.

이때 키보드가 내려갔을 때 키보드가 내려간 만큼 요소 영역도 다시 내려가도록 해주게 되어있다.

 

 - 하지만 특정 버전의 WebView 등에서 문제가 생긴다.

다음과 같이 키보드가 내려갔음에도 키보드가 내려간 만큼 화면이 내려가지 않는 현상이 발생한다.

 

 - 이런경우 사실 os버전에 따라 다른 솔루션이 있을 수 있겠지만, 다음과 같은 방법을 적용하여 해결하였다. - 다음 내용을 참고 하였다.github.com/ionic-team/capacitor/issues/814

 

 - 위의 github 내용중 다음과 같은 event를 일으키면 해당 WebView영역이 다시 돌아오게 되었다.

window.scrollTo(0,0);
document.body.scrollTop = 0;

 

 - 실제 이벤트 리스너를 통해 스크립트를 발생 시킬지, App과 협업을 할지 등은 테스트가 필요하지 않을까 싶다.

여러가지 고민했던 방법들도 다 적어 두려 한다.

 

window.addEventListener('keyboardWillHide', () => {
window.scrollTo(0,0);
document.body.scrollTop = 0;
});

 

const scrollToTopFn = () => {
if (window.Keyboard && !window.Keyboard.isVisible) {
window.scrollTo(0,0);
window.document.body.scrollTop = 0;
}
};

window.addEventListener('keyboardDidHide', () => {
window.setTimeout(scrollToTopFn, 100);
});