만약 input의 type이 text로 설정된 경우,
모바일 사용자의 사용성에 지장을 주는 것을 알고 계셨나요?
한번 모바일 환경에서 input의 type이 text로 설정되어 있고,
전화번호를 입력해야 하는 상황을 가정 해보시면 좋겠습니다.
노트북과 데스크톱에선 input의 type이 text여도
키보드를 이용하기에 차이를 체감하기 어렵지만
모바일에서는 작은 화면에서 제공되는 키보드를 터치하며,
사용하기에 그 차이를 체감하실 수 있습니다.
모바일 환경에서 천지인 키보드의 경우,
텍스트를 입력하는 키보드를 보여주어
숫자로 전환해야 하는 번거로움이 있고,
쿼티 키보드의 경우 작은 숫자 칸을 누르며,
오타로 인해 문자를 입력하는 경우 지워야 하는
불편한 상황이 만들어질 수 있습니다.
하지만, 개발자가 올바른 input의 값을 제공하는 경우
사용자의 불편한 상황을 억제해, 사용자의 사용성을 확보하며,
모바일 사용자를 배려할 수 있겠습니다.
체험 URL
아래에 해당 URL을 들어가시면
input의 type 값에 따라 변경되는
키보드를 직접 체험해 보실 수 있습니다.
https://frontendjmy.github.io/distribute-site/mobile-input/index.html
number인 경우
숫자를 입력하기 편한 자판이 노출됩니다.
tel인 경우
특수 기호가 추가 되며, 이 특수 기호는 국가 번호를 입력할 때 사용됩니다.
email의 경우
영문 자판으로 전환되며, 특수기호 @가 추가되어,
이메일을 입력하기 편한 자판이 노출됩니다.
search의 경우
값을 지울 수 있는 X 표시가 생기며,
돋보기가 표시됩니다.
time의 경우
시간을 선택하기 편한 UI가 제공되며, 키보드 모양 버튼을 누를 시,
시를 입력하는 input에선 다음 버튼,
분을 입력하는 input에선 완료 버튼이 표시됩니다.
