[html/jQuery] number와 정규식을 활용하여 input 박스에 숫자만 입력 가능하게 하는 법

서문

모바일로 텍스트 박스를 터치했을 때, 키보드가 한글, 영문으로 변경이 불가능하고 숫자 키보드만 나오는 경험 해보신 적 있을 것입니다.

 

마찬가지로 PC에서도 "숫자만 입력하세요"라는 박스에 영어나 한글 특수문자 등을 사용하려 해도 입력되지 않게 설정되어 있는 것들도 있습니다.

 

오늘은 이렇게 숫자만 입력받아서 처리해주어야 하는 상황에서 다른 문자는 입력하지 못하게 하는 방법을 알아보려 합니다.

 

---

본문

input type="number"

 

먼저 가장 간단한 방법입니다.

 

<input type="number" />

 

input type을 number로 지정해 두면 숫자만 입력 가능하게 됩니다.

단점은 문자 하나 입력하고 다른 곳 클릭하고 와서 또 입력하고 하면 한 글자씩은 입력이 되는 것입니다.

 

숫자만 입력하랬는데 이렇게 문자를 굳이 입력하는 사람 없겠지 싶지만 있습니다.

이럴 때는 숫자가 아니면 경고창을 띄워서 값을 넘기지 못하게 하는 것이 좋습니다.

 

 

숫자 이외의 값은 입력 불가능한 상태

 

728x90

 

위와 같이 문자는 한 글자 이상으로는 작성이 되지 않습니다. 숫자만 계속 작성이 가능하죠.

input type = number을 사용하면 모바일에서는 키보드가 숫자 키보드만 사용이 가능하게 바뀝니다.

이 부분을 활용해서 모바일 개발할 때 적용해도 좋을 것입니다.

 

 

정규식

 

다음은 정규식을 활용한 방법입니다.

이 방법은 정규식만 잘 짜면 특정 문자만 입력가능하게 하는 등 여러 가지 방법으로 활용이 가능합니다.

 

<script type="text/javascript">
    $(document).ready(function() {			
        $("#price").keyup(function() {
            var replace_text = $(this).val().replace(/[^-0-9]/g, '');
            $(this).val(replace_text);
        });
    });
</script>

 

정규식은 제이쿼리를 사용해서 적용해 보겠습니다.

 

input 박스를 만들어주고 id를 "price"로 지정해 줍니다.

제이쿼리를 활용하여 price에서 키보드를 눌렀다가 뗐을 때, 정규식이 동작하게 해 줍니다.

 

input 박스에 들어오는 값이 숫자가 아닌 문자라면 replace를 사용해서 "" 공백 처리 해줍니다.

 

 

숫자가 아니면 전부 공백처리

 

반응형

 

정규식의 장점은 문자 한 글자도 허용하지 않는다는 점입니다.

이전의 number을 사용했을 때는 한 글자는 남아 있다가 숫자를 입력했을 때 사라졌죠.

 

제이쿼리를 활용하지 않고 input 태그에 직접 적용해서 사용해도 됩니다.