모바일 웹사이트 입력창에 포커스가 갈 때 숫자 키패드가 나오게 하기

Stack Overflow에 자주 검색, 등록되는 문제들과 제가 개발 중 찾아 본 문제들 중에서 나중에도 찾아 볼 것 같은 문제들을 정리하고 있습니다.

Stack Overflow에서 가장 먼저 확인하게 되는 가장 높은 점수를 받은 Solution과 현 시점에 도움이 될 수 있는 가장 최근에 업데이트(최소 점수 확보)된 Solution을 각각 정리하였습니다.

 

아래 word cloud를 통해 이번 포스팅의 주요 키워드를 미리 확인하세요.

How to force keyboard with numbers in mobile website in Android

모바일 웹사이트에서 안드로이드에서 숫자 키패드가 나타나도록 강제하는 방법

 문제 내용 

I have a mobile website and it has some HTML input elements in it, like this:

저는 모바일 웹사이트를 가지고 있고, 다음과 같은 HTML 입력 요소가 있습니다.

<input type="text" name="txtAccessoryCost" size="6" />

 

I have embedded the site into a WebView for possible Android 2.1 consumption, so that it will also be an Android application.

저는 모바일 웹사이트를 가지고 있고, 이 웹사이트에는 다음과 같은 HTML 입력 요소가 있습니다. 이 사이트를 가능한 Android 2.1에서 사용할 수 있도록 WebView에 내장하여 Android 애플리케이션으로 만들었습니다.

 

Is it possible to get the keyboard with numbers instead of the default one with letters when this HTML input element is focused?

이 HTML 입력 요소가 포커스를 받을 때 기본 문자가 아닌 숫자가 있는 키보드를 가져올 수 있을까요?

 

Or, is it possible to set it for the whole application (maybe something in the Manifest file), if it is not feasible for an HTML element?

또는, HTML 요소에 대해 적용할 수 없다면 (HTML 요소에 적용하는 것이 불가능한 경우), 전체 애플리케이션에 대해 설정할 수 있는 방법이 있을까요? (예를 들어, Manifest 파일에서 설정하는 방법)

 

 

 

 높은 점수를 받은 Solution 

<input type="number" />
<input type="tel" />

 

Both of these present the numeric keypad when the input gains focus.

이 두 가지 방법 모두, 입력란이 포커스를 얻을 때 숫자 키패드를 보여줍니다.

 

<input type="search" /> shows a normal keyboard with an extra search button

<input type="search" /> 는 추가 검색 버튼이 있는 일반 키보드가 나타납니다.

 

Everything else seems to bring up the standard keyboard.

나머지는 모두 기본 키보드가 나타납니다.

 

 

 

 가장 최근 달린 Solution 

inputmode according to WHATWG spec is the the default method.

WHATWG(웹 하이퍼텍스트 애플리케이션 기술 작업 그룹) 사양에 따르면, inputmode는 기본 방법(method)입니다.

 

For iOS devices adding pattern could also help.

iOS 기기의 경우 pattern을 추가하는 것도 도움이 될 수 있습니다.

 

For backward compatibility use type as well since Chrome use these as of version 66.

하위 호환성을 위해 Chrome 66 버전 이후로는 type도 사용하므로, type도 함께 사용하십시오.

<input
  inputmode="numeric"
  pattern="[0-9]*"
  type="number"
/>

 

 

출처 : https://stackoverflow.com/questions/3372380/how-to-force-keyboard-with-numbers-in-mobile-website-in-android