114. (TWOK/WORK) [업무 이슈] 모바일 ( android , ios ) 웹뷰 에서 가상 키보드 활성시 하단 버튼 레이아웃 숨김 이슈 - position fixed 설정

---

[제 목]

​

[업무 이슈] 모바일 ( android , ios ) 웹뷰 에서 가상 키보드 활성시 하단 버튼 레이아웃 숨김 이슈 - position fixed 설정

 

---

[내 용]

 

------------------------------------------------------------------------------
[이슈 사항]
------------------------------------------------------------------------------

1. 모바일 ( android , ios ) 웹뷰 webview 에서 가상 키보드 활성 시 하단 버튼 레이아웃이 안보이지 않는다는 이슈 접수

------------------------------------------------------------------------------
[원인 파악 및 증상 재현]
------------------------------------------------------------------------------

1. 모바일 웹뷰 로그인 화면창에서 ID , PW 입력 및 가상 키보드 활성 수행 실시


2. ID , PW 입력 후 [로그인 버튼] 을 클릭 하려 했지만, 가상 키보드 뒤에 가려져 버튼이 표시 되지 않는 이슈 확인

  >> IOS 의 경우 PW 창 포커스 활성 시 화면이 올라가면서 버튼이 표시 되지만, Android 의 경우 버튼이 가려짐 확인


3. [로그인 버튼] 을 클릭 하기 위해 다시 가상 키보드를 내린 후 버튼을 클릭 해야하는 증상 확인


4. 다시 한번더 UI 화면을 클릭해야 하므로 가상 키보드 활성 시 완료 버튼이 가상 키보드 위쪽에 표시되게 해달라는 요청 확인

------------------------------------------------------------------------------
[조치 내용]
------------------------------------------------------------------------------

1. 안드로이드에서 버튼이 완전히 가려지는 이슈 수정 위해 네이티브 코드 및 웹 CSS 스타일 코드 수정 실시

  >> 안드로이드 AndroidManifest.xml 파일에서 웹뷰 액티비티 가상 키보드 활성 시 화면 Resize 설정 수행 : android:windowSoftInputMode="adjustResize"

  >> 웹 CSS 에서 하단에 위치 한 로그인 버튼 CSS 스타일 position fixed 설정 수행 : position:fixed; bottom:0;


2. 추가 논의 내용 : 

  >> 모바일 가상 키보드 활성 시 웹뷰 브릿지로 on , off 상태 값 전달

  >> 자바스크립트 단에서 android 의 경우 onresize 화면 사이즈 변경 감지로 레이아웃 동적 위치 처리

  >> 자바스크립트 단에서 input 박스 실시간 포커스 활성 상태 체크로 가상 키보드 활성 상태 확인

------------------------------------------------------------------------------
[참고 사이트]
------------------------------------------------------------------------------

[[Web] 모바일 브라우저 가상 키보드 CSS 화면 밀림 및 축소 현상 px 크기 재설정 로직]

https://blog.naver.com/kkh0977/223624339787?trackingCode=blog_bloghome_searchlist


[[Web] 자바스크립트 에서 모바일 ( android , ios ) 가상 키보드 활성 상태 확인 방법 - onresize , focus , blur]

https://blog.naver.com/kkh0977/223629294644?trackingCode=blog_bloghome_searchlist


[자바스크립트 input box 포커스 활성 및 비활성 , 가상 키보드 제어 처리]

https://blog.naver.com/kkh0977/222718499413?trackingCode=blog_bloghome_searchlist


[웹 프론트 keyboard 키보드 활성 시 ui 밀림 , 줄어듬 현상 방지 및 zoom in 줌 효과 제거 방법]

https://blog.naver.com/kkh0977/222416500563?trackingCode=blog_bloghome_searchlist


[안드로이드 - 웹뷰 (webview) 모바일 가상 키보드 상태 리사이징 설정 실시]

https://blog.naver.com/kkh0977/222667902390?trackingCode=blog_bloghome_searchlist

------------------------------------------------------------------------------

---

​