form input only numbers 자바스크립트 숫자만입력

출처 : http://blog.lael.be/post/81

배경 

Javascript 로 사용자의 키 입력을 감지하여 숫자만 입력받습니다.

이 Javascript는 전화번호, 휴대폰, 생년월일등을 입력받을 때 주로 사용됩니다.

 

이론

onkeypress 이벤트를 사용하여 event.keyCode 값을 얻어냅니다.

숫자범위의 keyCode가 아니면 입력을 무효화 시킵니다.

하지만 다국어를 사용하여 keyCode가 얻어지지 않으면 예상된 반응을 하지 않습니다.

예를 들어 한글의 “홍” 이라는 단어를 입력도중 “ㅎ”를 입력했을 때 이것은 keypress 이벤트가 발생하지 않습니다. (완전한 입력으로 보지 않음)

CSS의 ime-mode:disabled; 속성을 이용하여 다국어속성을 끄고 사용합시다.

#주의 : ime-mode 라는 css속성은 브라우저에서는 정상적으로 지원하나 W3C 표준속성은 아닙니다. 하지만 원하는대로 동작하니까 쓰도록 합시다.

 

내용

숫자범위의 keyCode 값은 다음과 같습니다.

0(48)  ~ 9 (57)

 

Demo

1. 다음의 링크는 사용자가 입력한 키의 keyCode 값을 알려줍니다.

예제링크 : http://cdn04.lael.be/datalink/qdic.kr/Javascript-eventkeyCode-Value_ex01.html

 

2. ime-mode:disabled; 를 이용. HTML5의 number type를 이용.

HTML5 를 지원하지 않는 브라우저는 자동으로 text type로 읽어들임. 비표준 CSS사용

1	<input type="number" style="ime-mode:disabled;" onkeypress="return digit_check(event)"/>

1 2 3 4 5 6

function digit_check(evt){ var code = evt.which?evt.which:event.keyCode; if(code < 48 || code > 57){ return false; } }

예제링크 : http://cdn04.lael.be/datalink/qdic.kr/Javascript-onlynumbers_ex02.html

 

 

3. ime-mode CSS속성을 이용하지 않고 구현하는 방법. 유효한 CSS 표준.

사용자의 입력이 끝났을 때 입력된 값을 필터링합니다.

단점은 다국어 입력시 깜빡임 현상이 발생합니다.

예제링크 : http://cdn04.lael.be/datalink/qdic.kr/Javascript-onlynumbers_ex03.html

 

*라엘이의 의견

실무에서는 거의 2번의 코드대로 작성을 하나, 3번을 사용하는 것이 바람직합니다.

[출처] [Javascript] form input only numbers 자바스크립트 숫자만입력|작성자 관절분리