가격 입력 필드를 위한 jQuery 자동 포맷팅 및 제한(금액만)

웹 페이지에서 금액을 입력받을 때, 천 단위마다 콤마를 자동으로 삽입하거나 입력 가능한 최대 금액을 제한하는 기능은 사용자 편의성뿐만 아니라 관리자 입장에서도 데이터의 일관성과 관리 효율성을 확보하는 데 유용합니다. 본 문서에서는 해당 기능을 jQuery를 활용하여 구현하는 방법을 설명하며, .onlyprice 클래스를 중심으로 그 구체적인 적용 방식을 다룹니다.

---

✨ 코드 원문

$(document).on('keyup focusout', '.onlyprice', function(){
    var value = $(this).val().replace(/[^0-9,]/g, ''),
        limit = $(this).data('limit');

    value = value.replace(/,/g, '');
    var formattedValue = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

    if (limit > 0)
    {
        var numericValue = parseInt(value);
        if (numericValue > limit)
        {
            formattedValue = number_format(limit);
        }
    }

    $(this).val(formattedValue);
});

---

✨ 주요 기능 설명

1. 숫자와 콤마만 허용

var value = $(this).val().replace(/[^0-9,]/g, '');

• 숫자(0-9)와 콤마(,)를 제외한 모든 문자 제거

2. 기존 콤마 제거 및 다시 포맷팅

value = value.replace(/,/g, '');
var formattedValue = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

• 모든 콤마를 제거한 후, 천 단위 콤마 추가 (1000000 → 1,000,000)

3. 최대 금액 제한 기능

if (limit > 0)

• 입력 필드에 data-limit 속성이 지정되어 있으면, 해당 값을 초과하지 않도록 제한
• 초과 시, 최대 허용 값으로 자동 조정 (예: number_format(1000000) 반환)

4. 입력값 업데이트

$(this).val(formattedValue);

• 필터링 및 포맷팅된 값을 입력 필드에 다시 반영

---

✨ 보조 함수: number_format()

위 코드에서는 number_format(limit) 함수를 호출하고 있습니다. 일반적으로 이는 다음과 같은 형식으로 정의됩니다:

function number_format(num) {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

• 숫자를 문자열로 바꾼 뒤, 천 단위 콤마를 삽입해줍니다.

---

✨ 사용 예시

<input type="text" class="onlyprice" data-limit="1000000" placeholder="금액을 입력해주세요" />

• 위 예시에서는 1,000,000을 초과하여 입력할 수 없습니다.

---

✨ 활용 팁

• input 이벤트까지 감지하면 모바일 환경에서도 반응이 더 매끄러워집니다.
• Intl.NumberFormat을 사용하면 로케일 기반 포맷팅도 가능

---

✨ 결론

입력값을 실시간으로 필터링하고 포맷팅해주는 이 코드는 금액 입력 UI의 직관성과 편의성을 높여줍니다. 사용자 오류를 줄이고, 시스템에도 안정적인 데이터를 전달할 수 있게 해주므로 거의 모든 쇼핑몰, 결제 입력 폼에 적용 가능합니다.