[jQuery] input 입력창에 숫자만 입력 하기(예제소스, 천단위콤마)

input 숫자만 입력하기

 

안녕하세요 오늘은 jQuery로 input 창에 숫자만 입력되는 방법을 알아보겠습니다.

1. attribute 를 이용하여 숫자만 입력

input창에 numberOnly 라는 attribute를 설정합니다.

jQuey로 numberOnly로 설정되어있는 속성을 찾아 정규식을 사용하여 keyup 이벤트를 설정하는 법입니다.

정규식을 사용하여 숫자가 아닌것이 입력이 되면 replace 합니다.

속성을 사용하면 좋은점은 원하는 input창에 지정한 속성만 기입하면 어디든지 사용할 수 있습니다.

 <script type="text/javascript">
 $(document).ready(function(){
 
   $("input:text[numberOnly]").on("keyup", function() {
      $(this).val($(this).val().replace(/[^0-9]/g,""));
   });
   
 });
 </script>
 
 <input type="text" id="test1" numberOnly>
 <input type="text" id="test2">
 <input type="text" id="test3" numberOnly>

아래 인풋창에 테스트해 보세요.

 

 

2. 함수를 만들어서 숫자만 입력

keycode를 이용하여 함수를 만들어서 숫자만 입력 설정합니다.

keycode를 사용하면 아예 입력조차 못하게 막아버립니다.

<script type="text/javascript">
  function checkInputNum(){
      if ((event.keyCode < 48) || (event.keyCode > 57)){
          event.returnValue = false;
      }
  }
</script>

<input type="text" onkeyPress="javascript:checkInputNum();">

 

 

3. input창에 정규식 숫자만 입력

input 창에 정규식 스크립트를 바로 사용하는 방법이 있습니다.

하지만 추천드리지는 않습니다. 함수로 빼놓아서 설정해놓는게

여러군데서 사용할수도 있고 유지보수 하기도 편합니다.

 <input type="text" id="test1" onKeyup="this.value=this.value.replace(/[^0-9]/g,'');"/>

 

 

4. input창에 숫자 천단위 콤마 적용하기

숫자만 입력하는 input창에서는 금액이나, 수량을 표시하는 경우가 많습니다.

가독성이 좋게 천단위 구분 콤마를 적용해봅시다.

<script type="text/javascript">
	$(document).ready(function(){
      $("input:text[id='test3']").on("keyup", function() {
         $(this).val(addComma($(this).val().replace(/[^0-9]/g,"")));

      });
    });

//천단위마다 콤마 생성
function addComma(data) {
    return data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

//모든 콤마 제거 방법
function removeCommas(data) {
    if(!data || data.length == 0){
    	return "";
    }else{
    	return x.split(",").join("");
    }
}


</script>

천단위 콤마 테스트