Vue.js(자바스크립트) + 안드로이드(웹튜) 가상 키보드 안뜨게 막기(숨기기)

자바스크립트 기반 Vue.js로 제작한 웹페이지를 안드로이드 웹뷰로 띄울 때 가상 키보드 안뜨게 막는 방법입니다.

제 경우엔 자바스크립트로 구현한 자체 키보드가 있어서 안드로이드 웹뷰 이용 시, 가상 키보드가 뜨면 안 됩니다. 다행히 html5에선 모바일 웹뷰에서도 호환 가능한 키워드를 제공하고 있습니다.

▶ html5 inpumode

https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/inputmode

옵션 중 none은 가상 키보드를 사용하지 않습니다. 페이지가 자체 키보드나 입력 컨트롤을 구현할 때 사용합니다.

<input

 type="text"

 data-ref="inputContent"

 inputmode="none" />

그래서 input 태그 옵션으로 inputmod="none"를 추가하면 안드로이드 웹뷰에서 키보드 안뜨게 막을 수 있습니다.

안드로이드에선 웹페이지의 input에 포커스가 잡히면 자동으로 가상 키보드가 뜨는데요. html5 태그 옵션으로 이걸 막을 수 있습니다.

저는 안드로이드나 아이오닉에서 해결 방법을 찾았으나, 엄청난 실수였죠;;; 키보드 관련해서 hide, 숨기기, 안뜨게, 막기 등이 궁금하다면, "nokeyboard" 키워드로 검색하는 게 제 경험상 괜찮았습니다.

안드로이드 웹뷰를 활용한다면, 안드로이드 자체보단 자바스크립트 소스 코드를 찾는 게 더 빠를 수 있습니다.