[HTML] 이상적인 숫자 Input, <input type="number">를 쓰지 않는 이유

HTML에서 <input> 태그를 사용할 때 보통 type 속성을 설정하여 입력값의 유형을 정의함.

예를 들어 type="text"는 기본 텍스트 입력, type="checkbox"는 체크박스를 구현함.

근데 number는 잘 사용하지 않는데 궁금해서 찾아보고 이유를 확인함

 

입력값 제한의 불완전성

위 input에다가 입력값을 넣어보면 알 수 있는데 기본적으로 글자를 모두 제한하지 않음

•       +, -, .와 같은 특수기호 (+와 -는 덧셈, 뺄셈이 아닌 부호로서만 작용함, ex: +123, -123)
•       e (예: 1e10 형태의 지수 표현)
•       한글 글자..(글자 제한은 브라우저 단에서 제어하는데 들어가긴함)

위 ()의 규칙을 따르지 않으면 console.log에 아무것도 찍히지 않음 (NaN으로 인식되기 때문)

라고 생각하는 사람들이 많겠지만 이러한 제한은 특정 브라우저에서만 작용하는 사실,

일부 브라우저(Firefox)는 입력값을 제한하지 않으며, 사용자가 의도치 않은 값을 입력할 수 있음!

위에 말한대로 브라우저 단에서 제어하는 것이기에 브라우저가 일을 안하면 어쩔 수 없다.

두번째 이유는 단순히 오른쪽에 위치한 바가 거슬림

이 부분의 경우 CSS로 수정이 가능하긴 하지만 브라우저마다 별도로 수정이 필요한 단점이 있음

 

이상적인 방법?

그럼 input type을 text로 하고 JS로 제한을 걸면 되겠네로 생각하면 50% 정답이었다.

 

모바일의 시대에 맞게 PWA와 같은 기법을 사용하기도 하니, 모바일 사용자 관점에서도 편리하게 사용할 수 있게 만들어야한다.

 

그래서 아래와 같은 방식으로 만듬

 

See the Pen Untitled by 장성일 (@xgdarqzo-the-bashful) on CodePen.

 

inputmode의 경우 가상키보드가 지원되는 환경에서 키보드 형식을 맞춰주는 것으로 단순 숫자가 필요한 경우 numeric, 이메일은 email과 같이 쓰면 된다.

 

어떤 방식으로 나오는지는 이 사이트를 참고.

 

추가로 알게된 부분

 

1. input의 value는 모두 string 값임

 

text만 써서 몰랐는데 type=number 로 해도 typeof로 타입을 확인해보면 string 값임.

따라서 값의 수학적 계산이 필요하다면 JavaScript에서 명시적으로 Number() 함수를 사용해 숫자로 변환이 필요함

(어차피 클라이언트 쪽에서 계산이 필요하면 어차피 변환이 필요하니 더욱 type=number는 의미가 없는 것 같다.)

 

참조

HTML inputmode 속성 – 가상 키보드의 입력 모드 설정 - 코딩에브리바디

 

늘 재밌게 보고 있는 유튜브