숫자와 쉼표(,)만 입력 가능하게 하는 jQuery 입력 필터링

사용자 입력값을 제어하는 것은 웹 프론트엔드에서 아주 중요한 작업입니다. 오늘은 숫자(0-9)와 쉼표(,)만 입력할 수 있도록 제한하는 jQuery 코드를 소개하고, 어떻게 활용할 수 있는지 자세히 설명드리겠습니다.

---

✨ 코드 원문

$(document).on('keyup focusout', '.onlynumber', function(){
    $(this).val($(this).val().replace(/[^0-9,]/gi, ""));
});

✨ 코드 설명

• $(document).on(...) : 동적으로 생성된 요소도 포함하여 .onlynumber 클래스를 가진 input 요소에 이벤트를 바인딩합니다.
• 이벤트 종류는 keyup과 focusout입니다. 즉, 키를 누를 때마다 또는 input에서 포커스가 빠져나올 때마다 필터링을 실행합니다.
• replace(/[^0-9,]/gi, "") : 정규표현식을 이용해 숫자(0-9)와 쉼표(,)를 제외한 모든 문자를 제거합니다.

---

✨ 정규표현식 분석

/[^0-9,]/gi

• [^...] : 괄호 안의 문자들을 제외한 나머지를 선택합니다.
• 0-9 : 숫자 0부터 9까지 허용
• , : 쉼표 허용
• gi : 대소문자 구분 없이(global), 여러 번 반복 검사 (사실 숫자에 대소문자는 무관하지만 안전을 위해)

결과적으로 숫자와 쉼표만 입력 가능하게 만듭니다.

---

✨ 사용 예시

<input type="text" class="onlynumber" placeholder="숫자와 , 만 입력할 수 있어요" />

위 input 박스에 입력되는 문자열은 자동으로 숫자와 쉼표만 남게 됩니다. 예를 들어 a1b2c3,4.5를 입력하면 123,45로 정리됩니다.

---

✨ 활용처

• 금액 입력 필드: 1,000, 12,345 등 숫자와 쉼표로 구분되는 값 입력 시
• 전화번호 입력 (단, 이 경우에는 -도 허용해야 하므로 정규식을 수정해야 함)
• 통계 필터, ID 나열 등 숫자 입력이 중요한 상황에 활용 가능

---

✨ 개선 팁

1. 정규식의 g 플래그만 사용해도 됨: 대소문자가 없는 숫자 입력이기 때문에 i는 생략 가능
2. 다른 기호 추가 허용: 필요에 따라 .(소수점), -(음수 기호) 등을 정규식에 추가할 수 있습니다.
3. 실시간 포맷팅 적용: 금액 입력 시 자동 쉼표 포맷팅이 필요하다면 input 이벤트를 활용하고 포맷 함수와 조합해 사용 가능

---

✨ 결론

위 jQuery 코드는 간단하면서도 실용적인 입력 제한 방식입니다. 숫자와 쉼표만 입력되도록 제한하고자 할 때 매우 유용하며, 다양한 입력 필드에서 활용 가능합니다. 필요한 경우 정규식만 수정하여 다양한 요구사항에 맞게 확장할 수 있습니다.