아직도 input type에 number을 넣고 계신가요?

<input type="number"/>

 

위 코드는 보통의 인풋 창에서 숫자만을 넣기 위해 정의하는 속성이다. 다만 위 속성으로 정의를 하게 되면 아래와 같은 문제점이 생긴다.

· 데스크탑 스피너는 화살표가 생긴다.
· 스크롤 휠이나, 위 · 아래 방향키를 통해 값이 자유자재로 바뀔 수 있다.

 

이러한 문제점은 사용자의 UX를 해치며, 대부분의 사용자는 우편번호와 신용카드 같은 정보에 스피너를 통해 숫자를 증가 · 감소 시키고 싶어하지 않는다. 또한 스크롤 휠이나 위 · 아래 방향키를 통해 실수로 내가 입력했던 값이 바뀌어버리는 버그가 발생해 부정확한 정보를 제공할 위험성을 제공할 수 있다.

그러면 어떤 방식으로 쓸 수 있을까?

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

 

위 방식처럼 작성하게 된다면 위에서 발생한 버그요소들을 해결할 수 있을 뿐만 아니라 모바일에서는 모든 키가 담긴 키패드가 뜨는 것이 아니라, 숫자 키패드만이 자동으로 뜨게 된다. 또한 pattern="[0-9]*" 을 통해 숫자만 입력되도록 제한 가능하며 유효성 검사 시에 도움을 줄 수 있다. 필드 성격 자체가 숫자처럼 보이지만 실제로는 텍스트로 처리해야하는 경우가 생각보다 많은데, input="numeric" + "pattern" 조합을 이 상황에서 유용하게 사용할 수 있다.

 

<input type="number"> 태그를 신중하게 사용하자. 특히 신용카드 · 번호, 우편번호, 주민등록번호처럼 숫자만 입력하되, 실제로는 숫자로 계산하지 않는 필드에서는 type="number"를 사용하지 않는 것이 좋다.