모바일에서의 input 번호 입력 ui 바꾸기

우리는 input 을 만들 때에
<input type="text"> 의 문구로 입력을 처리하는 경우가 있다.

 

하지만, 핸드폰으로 입력을 할 때에 가끔은 전화를 걸기 위해 핸드폰에서 번호키를 입력하는 ui 가 더 나을 때도 분명히 있다.

 

예를 들어, 인증번호를 입력할 때에 숫자 4자리를 입력하는 경우, 혹은 내 핸드폰 번호를 입력하는 경우 등은 일반적인 쿼티 키보드 말고, 숫자 번호 입력판이 나오는게 훨씬 더 편한 ui 라는 것은 사용을 해보면 금방 느낄 수 있다.

 

숫자로만 이루어진 코드를 입력하는데에 있어, 굳이 왼쪽과 같이 키보드 배열이 나와 입력마다 숫자 변환키를 눌러 하는 비효율적인 방식을 택할 이유는 없다고 봅니다.

우측의 ui 는 취지에 맞게 입력을 숫자만 가능하고, 숫자를 입력하기 편한 ui 로 만들어 보았습니다.

 

일반적인 왼쪽의 코드 

=> input 의 type 을 text 로 두었을 경우

<input type="text" class="form-control" required style="width: 6rem; height: 6rem;">

 

숫자만을 입력하는 오른쪽의 코드

=> input 의 type 을 tel 로 두었을 경우

<input type="tel" class="form-control" required style="width: 6rem; height: 6rem;">

 

input 의 type 을 number 로만 두면 정말 숫자만 입력이 되게 하지, 모바일에서의 ui 를 번호판 형식으로 바꿔주는 것은 아닙니다

 

 

혹시나 고통받고 계실 rails 유저들 분을 위해 rails 코드도 남겨놓습니다

<%= f.number_field :phone, inputmode: "numeric", required: true,autofocus: true, autocomplete: "phone", :class => 'form-control', :id => "phone_num_field" %>