모바일 환경에서 input 입력 시 숫자 키패드로 설정하는 방법
모바일에서 인풋 입력시 숫자 키패드로 설정하기 위해 type을 number 로 지정하면 다음과 같은 단점들이 있다.
- 인풋의 UI 가 다르게 나온다.
- IOS 환경에서는 키패드가 안뜨는 버그가 있다.
- 만약 키패드가 뜨더라도 숫자만 입력하는 게 아닌 특수문자도 같이 입력하는 자판이 나온다.
위와 같은 문제를 해결하기 위해 타입에 전화번호를 입력하는 tel 타입으로 지정하면 IOS Android 환경 둘다 숫자 키패드로 깔끔하게 잘 동작한다.
<input type="tel" />타입을 number 로 지정했을때도 아래와 같은 방법으로 해결 할 수 있다고 한다.
<input type="number" pattern="[0-9]*" inputmode="numeric" min="0" />여기에서 더 많은 타입의 모바일 키패드 예시를 확인 할 수 있다.
참고
완벽함보단 꾸준함으로