JavaScript - input 박스에 숫자만 입력 가능하도록

inputbox validtion numbers only

오늘은 자바스크립트 유효성 체크중에 가장 많이 쓰이는 input 박스에

숫자만 입력 하는 방법을 알아보겠습니다.

개발 방법은 많지만 간단한 두가지 방법을 이용해서

구현 해보았습니다.

첫번째 인풋은

함수로 뺴서 숫자 keycode가 아니면

입력하지 못하도록 false를 주었고

1
2
3
4
5
function inNumber(){
  if(event.keyCode<48 || event.keyCode>57){
     event.returnValue=false;
  }
}

cs

두번째 인풋은

정규식을 이용해 바로 input 박스에 인라인으로 작성하였습니다.

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

▼ 아래 소스를 확인하시면 쉽게 이해가 가능하실 거라 생각 합니다.

<html>

<head>

    <script type="text/javascript">

    function inNumber(){

        if(event.keyCode<48 || event.keyCode>57){

           event.returnValue=false;

}

}

    </script>

</head>

 <body>

    <input type="text" onkeypress="inNumber();"/>  

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

 </body>

</html>

▼ 두가지 input 박스 모두 숫자만 입력 가능합니다.

마무리

새해가 밝았습니다. 2018년에도 즐거운 코딩 하시길 바랍니다!

댓글