[HTML] 모바일에서 input 다루기 (inputmode속성)

 

모바일에서 input keyboard 숫자 키보드로 띄우기

 

흔히 input type을 number로 지정해주면,

안드로이드에서는 문제없이 숫자 키패드를 띄워주지만,

IOS에서는 숫자 키패드가 나오지 않는다.

이 경우 pattern 속성을 사용하여 숫자만 받을 수 있도록 지정할 수 있다.

<input type="number" pattern="\d*">
<input type="number" pattern="^[0-9]+$">

 

또다른 방법으로는 inputmode 속성을 사용 하는 방법이다.

// inputmode는 type 속성에 따라 정해지며 기본값은 text 이다.

<input type="text" inputmode="none">
// input 작성시 모바일 가상 키보드가 나오지 않는다.

<input inputmode="decimal">
// 소수점을 제공하는 숫자형 키보드가 나온다.

<input inputmode="numeric">
// 숫자형 키보드가 나온다.

<input inputmode="tel">
// 전화번호를 입력하기 위한 숫자형 키보드가 나온다.

<input inputmode="search">
// 검색을 위한 text 키보드가 나온다.

<input inputmode="email">
// 이메일 입력을 위한 text(eng) 키보드가 나온다.

<input inputmode="email">
// URL 입력을 위한 text 키보드가 나온다.

<input inputmode="one-time-code">
// SMS에서 보안코드를 가져오고 자동입력 할 수 있는 키보드가 나온다.