프로그램

jquery 숫자만 입력 체크, 천 단위 콤마 자동 추가

다온다올과함께 2024. 10. 30. 07:00

 

 

 

 

jQuery를 사용하여 입력 필드에 숫자만 입력되도록 체크하고 입력한 숫자에 천 단위 콤마(쉼표)를 자동으로 추가하는 방법은 다음과 같습니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>숫자만 입력 및 천 단위 콤마 자동 추가</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="numberInput" placeholder="숫자를 입력하세요">

    <script>
        $(document).ready(function() {
            $('#numberInput').on('input', function() {
                // 숫자만 입력되도록 필터링
                let value = $(this).val().replace(/[^0-9]/g, '');

                // 천 단위 콤마 추가
                value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

                // 필드에 업데이트
                $(this).val(value);
            });
        });
    </script>
</body>
</html>

 

 

 

 

설명

  1. 숫자만 입력 필터링
    • value.replace(/[^0-9]/g, '')를 사용하여 숫자가 아닌 모든 문자를 제거합니다.
  2. 천 단위 콤마 추가
    • value.replace(/\B(?=(\d{3})+(?!\d))/g, ',') 정규식을 사용하여 세 자리마다 콤마를 삽입합니다.

 

이 스크립트를 사용하면 숫자만 입력할 수 있고 입력 시 자동으로 콤마가 추가됩니다.

 

 

 

 

 

 

#jQuery #숫자만입력 #천단위콤마 #천단위콤마자동추가 #정규식 #문자제거정규식 #천단위콤마정규식 #프로그래밍 #조금씩배우는프로그램밍

 

 

 

 

반응형