[JavaScript] iOS, input type="number"일 때 숫자 키패드 띄우기

모바일 대응을 하다보면 만나는 문제, 안드로이드와 iOS...

 

안드로이드는 input 태그의 type 속성에 number 지정을 해주면 숫자 키패드가 자동으로 잘 나타난다.

반면에, iOS는... ^^ type="number" 임에도 불구하고 일반적인 한/영 키보드가 나와 한글, 영문은 물론 특수문자까지 입력이 가능하다. 

 

그렇다면, 어떻게 숫자 키패드가 나오게 할 수 있을까?

 

방법은 매우 간단했다!

input 태그의 inputmode 속성을 지정해주면 끝 - 

 

<input type="number" inputmode="numeric" />
<input type="number" inputmode="decimal" />

decimal은 '.'도 입력할 수 있는 숫자 키패드를 제공하고, numeric은 정말 순수한 숫자 키패드를 제공하니 용도에 맞게 선택하면 된다!

 

다만, 이는 최신 iOS에서만 동작이 되는 듯하니, 최신 버전 외에도 지원을 한다면 pattern 속성도 추가로 적어줘야 한당~

 

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

 

 

 

 

 

inputmode - HTML: Hypertext Markup Language | MDN