[Javascript] 숫자만 입력 받기

예전에 ASP.NET에서 숫자만 입력받기 게시물을 작성한 적이 있었는데, 큰 구현 핵심에는 차이가 없는 것 같습니다. 어차피 닷넷 코드에서도 숫자 입력 제한 처리는 javascript 코드로 작성했으니까요.

 

Javascript 코드를 통해서 textbox에 숫자만 입력받기 위해서는 다음과 같이 코드를 작성합니다.

 

<input type="text" id="number_value" style="text-align:center;IME-MODE:disabled;" onkeyPress="if ((event.keyCode<48) || (event.keyCode>57)) event.returnValue=false;" maxlength=10></asp:TextBox>

 

OR

 

 

<input type="text" id="number_value" name="number_value" style="width:100px;height:20px;ime-mode:disabled;" maxlength=10 onkeyPress="InpuOnlyNumber(this);" value="0" />

 

<script type="text/javascript">

...
function InpuOnlyNumber(obj)
{
    if (event.keyCode >= 48 && event.keyCode <= 57) { //숫자키만 입력
        return true;
    } else {
        event.returnValue = false;
    }
}
...

</script>

 

onkeypress는 객체 내에서 키보드 키가 눌렸을 때 발생되었을 때, 호출되는 이벤트 속성입니다.

 

그리고 event.KeyCode는 이벤트 발생 당시의 입력된 키 코드를 ASCII 값을 십진수의 값으로 가지고 있습니다. ASCII 코드에서 숫자 코드 '0'은 48이며, 숫자 코드 '9'는 57입니다.

 

그렇기 때문에 십진수로 48보다 크고 57보다 작다 라는 조건을 체크하면 숫자만 입력받게 되는 것입니다. 숫자 외에도 다른 문자의 입력을 더 허용하고 싶다면 해당 ASCII 코드 입력 허용에 대한 조건을 추가해 주면 됩니다.

 

참고 : 아스키코드표 - http://math88.com.ne.kr/crypto/text/ascii.html

 

 

위에서 2가지 구현 방법을 보여주고 있는데, 처리 방식은 100% 동일합니다.

단지 조건 스크립트를 onkeyPress 속성에 바로 적용했는냐, 함수로 구현해서 적용했는냐의 차이입니다.

 

사용되는 곳이 많다면 2번째 방법처럼 함수로 만들어서 사용하는 것을 추천합니다.

처음에는 숫자만 입력 받도록 제한하려고 했는데, 특수 문자 '-' 도 입력 받도록 수정하려고 한다면 첫번째 방법으로 구현한 경우는 모든 작성 코드를 찾아서 재수정해야 합니다. 두번째 방법인 함수로 만들어서 호출하는 방식으로 구현하였다면 함수 하나만 수정해주면 함수를 호출하는 모든 객체에 적용될 것입니다.^^