발견한 moment!
현재 개발 중인 서비스에서는 입시 결과를 예측하기 위해 사용자의 과목 점수를 input으로 입력받고 있습니다.
입력될 값은 점수일 뿐이라고 생각해서 input 태그의 type 속성을 number로 지정하고 테스트를 하는 와중에 알파벳 e와 -, + 부호가 입력되는 현상을 발견했습니다...! 🧐
왜 그런건지에 대해 조금 서칭을 해보니 input type=number의 경우 '부동소수점'의 표현을 위해 알파벳 e 혹은 E가 입력될 수 있도록 html spec으로 지정되어 있음을 확인했습니다.
(한국어 'ㄷ'도 입력이 됩니다. 키보드 keycode를 통해 입력 받을지에 대한 유무를 판별하고 있는 듯 합니다.)
부동소수점에서 e의 의미
매우 큰 수를 부동소수점으로 표현할 때 e를 사용하게 되는데, e 뒤에 오는 숫자는 10의 지수를 뜻합니다.
지수가 양수이면 소수점을 지수만큼(e 뒤의 숫자) 오른쪽으로 이동시키고 음수라면 왼쪽으로 이동시키면 부동소수점(e)을 사용하지 않았을 경우의 원래 값을 알 수 있습니다.
예시)
12e2 = 12 X 10² = 1200
1443e-3 = 1443 X 1/10³ = 1.443
해결하려면...?
input태그를 사용하며 이러한 현상을 해결하려면 type속성을 text로 설정한 후에 이벤트 핸들러 내에서 정규식 혹은 키보드의 keycode를 통해 숫자만 입력되도록 처리해야 될 것 같습니다. 😭
혹시나 type="number"속성을 사용할 경우 이러한 예외상황을 꼭 고려하여 사용하시길 바랍니다!
참고
Why does the HTML input with type "number" allow the letter 'e' to be entered in the field?
I have the following HTML5 input element: <input type="number"> Why does this input allow for the character 'e' to be entered in the input field? No other alphabet character is abl...
stackoverflow.com
https://hianna.tistory.com/413
[Javascript] input 박스에 숫자만 입력되도록 설정하는 4가지 방법
input 박스에서 사용자에게 숫자만 입력되도록 설정하는 방법 4가지를 소개합니다. input 박스에 숫자만 입력되도록 설정하는 4가지 방법 1. 'type'을 'number'로 지정하기 2. 입력된 keycode 체크하기 3. on
hianna.tistory.com