inputmode='none' 안드로이드 WebView 키보드 숨김 (ionic5)

우선, 작업 중인 프로그램을 설명하면 이렇습니다.

ionic 5 cordova 안드로이드 (웹뷰 사용)

vuejs 기반 웹 페이지 (웹 페이지 키보드 구현)

ionic5에서 안드로이드 프로젝트를 생성했습니다. 그리고 안드로이드 웹뷰를 통해 URL을 로드합니다. Android 환경에선 일반적인 input 태그에 포커스가 생기면 자동으로 Android 가상 키보드가 화면 아래에서 위로 올라옵니다.

 

하지만, 웹 페이지 자체 키보드나 입력 컨트롤이 있다면 가상 키보드를 사용할 필요는 없어요. 이럴 땐, 안드로이드를 수정하는 게 아니라 HTML5 태그 속성 중 inputmode를 사용하면 됩니다.

 

해당 내용은 아래 모질라 개발자 문서에 담겨있습니다.

inputmode
inputmode 전역 특성은 사용자가 요소나 요소의 콘텐츠를 편집할 때 입력할 수 있는 데이터 유형의 힌트를 제공하는 열거형 특성입니다.
developer.mozilla.org

▶ inputmode

전역 특성은 사용자가 요소나 요소의 콘텐츠를 편집할 때 입력할 수 있는 데이터 유형의 힌트를 제공하는 열거형 특성입니다. 가능한 값은 다음과 같습니다.

 

▶ none

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

 

▶ text (기본값)

사용자의 현재 로케일에 맞는 표준 키보드를 제공합니다.

 

 

결론적으로 VueJs 기반 웹 페이지를 안드로이드 WebView로 불러올 때, 가상 키보드가 필요하지 않다면 inputmode를 none으로 설정하면 됩니다.

 

inputmode='none'

 

input 태그 안쪽에 위의 소스 한 줄만 넣어주면 안드로이드 가상 키보드가 뜨는 걸 막을 수 있습니다.

 

android, ios 등 모든 모바일 환경에서 공통적인 부분이니 웹앱, 하이브리드 등 프론트엔드 개발자라면 모바일 환경을 염두에 두고 습관처럼 inputmode를 설정하는 게 좋겠네요.

 

댓글(0)

Designed by JB FACTORY