[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"로 지정해 줍니다.

제이쿼리를 활용하여 키보드를 눌렀을 때 동작하도록 keyup 함수를 사용합니다.

 

정규식을 활용하여 input 박스에 들어오는 값이 숫자가 아닌 문자라면,

replace를 사용해서 "" 공백 처리 해줍니다.

 

 

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

 

 

위의 이미지처럼 숫자가 아니라면 입력이 되지 않는 것을 확인할 수 있습니다.

 

반응형

 

 

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

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

 

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

 

---

 

결론

 

이 포스팅에서는 정규식을 이용하여 숫자만 입력 가능하게 해주는 기능을 만들어 보았습니다.

정규식이 생소하고 어렵더라도 잘 적용해서 쓰면 유용한 기능입니다.

 

값을 입력받을 때 숫자만 입력받게 된다면 입력받은 값을 더 쉽게 처리할 수 있어,

개발에 유용한 기능이라 할 수 있겠습니다.

 

여러 방식이 있지만 자신에게 맞는 방식으로 적용해서 사용해 보시길 바랍니다.