jQuery로 숫자만 입력 가능하게

 

jQuery로 숫자만 입력 가능하게 만들기, 쉽게 해보자!

왜 숫자만 입력해야 할까?

안녕하세요! 웹 개발하다 보면 입력 필드에서 숫자만 입력 받아야 할 때가 많죠. 예를 들어, 전화번호, 나이, 금액 같은 데이터는 문자나 특수기호가 들어가면 곤란하잖아요. 오늘은 jQuery 숫자만 입력 가능하게 만드는 방법을 알려드릴게요. jQuery는 자바스크립트를 더 쉽게 다룰 수 있게 해주는 라이브러리라 초보자도 금방 따라 할 수 있어요. 2025년 3월 기준, 여전히 웹 개발에서 유용하니 같이 배워볼까요?

jQuery로 입력 제한, 어떻게 할까?

jQuery 입력 제한을 구현하려면 입력 이벤트(예: keypress, keyup)를 감지하고, 숫자가 아닌 입력을 막는 로직을 짜야 해요. 여기선 두 가지 방법 보여드릴게요: 하나는 간단한 정규식 활용, 다른 하나는 키 코드로 체크하는 거예요. 둘 다 실무에서 쓰기 좋아요!

방법 1: 정규식으로 숫자만 허용

첫 번째 방법은 입력값을 실시간으로 체크해서 숫자가 아니면 지우는 거예요. 정규식(/[^0-9]/g)으로 숫자가 아닌 걸 찾아 바꿔버리죠. 코드 보세요:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<input type="text" id="numberInput" placeholder="숫자만 입력하세요">

<script>
$(document).ready(function() {
    $("#numberInput").on("input", function() {
        $(this).val($(this).val().replace(/[^0-9]/g, ""));
    });
});
</script>
    

이렇게 하면 숫자 입력 필드가 완성돼요! input 이벤트는 키보드 입력, 붙여넣기까지 다 잡아줘서 편리해요. "abc123" 치면 "123"만 남아요. 간단하죠?

방법 2: 키 코드로 실시간 제어

두 번째는 keypress 이벤트로 키 입력을 막는 거예요. 숫자 키(0-9)만 허용하고 나머지는 차단하죠. 백스페이스(8), 탭(9) 같은 특수 키도 허용해야 입력이 자연스러워요. 코드 보세요:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<input type="text" id="numberOnly" placeholder="숫자만 입력하세요">

<script>
$(document).ready(function() {
    $("#numberOnly").on("keypress", function(e) {
        var keyCode = e.which ? e.which : e.keyCode;
        if (keyCode > 31 && (keyCode < 48 || keyCode > 57)) {
            e.preventDefault();
        }
    });
});
</script>
    

keyCode 48~57이 숫자 0~9에 해당해요. 이 외의 키는 preventDefault()로 막아버리죠. "a"나 "-" 같은 건 아예 입력 안 돼요. 단, 붙여넣기는 막히지 않으니 주의해야 해요.

두 방법 비교, 뭐가 더 나을까?

jQuery 숫자만 입력 구현에서 정규식 방법은 붙여넣기까지 대응 가능해서 범용성이 좋아요. 반면 키 코드 방법은 입력 순간 막아줘서 사용자 경험이 조금 더 직관적일 수 있죠. 저는 개인적으로 정규식 방법을 더 추천해요. 왜냐? 복사-붙여넣기 같은 상황도 커버하니까요. 그래도 상황에 따라 선택하면 돼요!

추가 팁: 입력 길이 제한까지 넣어볼까?

숫자만 입력 가능하게 만든 김에, 길이 제한도 추가하면 더 실용적이에요. 예를 들어, 전화번호처럼 11자리로 제한하고 싶다면 이렇게 수정하면 돼요:

$("#numberInput").on("input", function() {
    $(this).val($(this).val().replace(/[^0-9]/g, "").substring(0, 11));
});
    

substring(0, 11)로 11자까지만 남기니까 깔끔하죠. 이런 식으로 숫자 입력 필드를 커스터마이징할 수 있어요.

실무에서 주의할 점

jQuery 입력 제한 쓸 때 몇 가지 조심할 게 있어요. 먼저, 모바일 환경에서 터치 키보드가 숫자 패드로 안 바뀔 수 있으니 <input type="number">와 같이 쓰는 것도 고려해보세요. 근데 type="number"는 화살표 생겨서 UI 망칠 수 있으니 CSS로 숨기면 좋죠(-webkit-appearance: none;). 또, 오래된 브라우저 호환성 체크해야 해요. jQuery 3.6.0은 대부분 잘 되지만, 혹시 모르니까 테스트 해보세요!

마무리하며

jQuery 숫자만 입력 가능하게 만드는 법, 어때요? 간단한 코드 몇 줄로 웹 폼 깔끔하게 정리할 수 있죠. 웹 개발 팁으로 실무에 바로 써먹기 좋아요. 저는 정규식 방법으로 전화번호 입력창 만들어서 프로젝트에 넣어봤는데, 클라이언트 반응 좋았어요! 여러분도 직접 해보고, 다른 방법 있으면 댓글로 공유해 주세요. 같이 배우면 더 재밌잖아요!