jQuery 천단위 콤마 자동 적용하기 (input 활용)

 

 

안녕하세요.

 오늘은 jQuery에서 input 태그 요소에 숫자 천 단위 콤마를 추가하는 방법을 포스팅하려고 합니다.

화면을 개발하다보면 input 요소에 숫자값을 입력하는 경우가 있는데, 입력값이 금액인 경우에는 자동으로 입력이 되도록 처리해야 하는 경우가 있습니다. 

콤마를 추가해 주는 기능은 기본적으로 자바스크립트로 처리를 하며, input 요소를 컨트롤하는 이벤트와 값을 처리하는 부분이 jQuery로 처리를 하게 하였습니다.

그러면 어떤 식으로 처리를 하면 되는지 예제를 통해서 알아보도록 하겠습니다.

 

---

1. 천단위 기준으로 콤마 추가하기 

import jQuery 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

먼저 jQuery 라이브러리를 import 시켜줍니다.

---

html input 요소 추가

<div class="input-div">
    <input type="text" id="strNum"/>
</div>

input 요소를 추가해 주고, type은 text로 설정해 줬습니다. 그리고 jQuery로 해당 요소를 호출하기 위해 id를 추가해 줬습니다.

---

javascript 소스 추가

<script>
$(function () {

    /**
     * input 입력값 keyup 이벤트
     */
    $('#strNum').keyup((e) => {
        // 콤마 적용
        var num = addComma(e.target.value);
        // input 박스에 콤마가 추가된 값으로 변경
        $('#strNum').val(num);
    });
});

/**
 * 숫자형 데이터 3자리마다 콤마 찍기 Function
 * 
 * @param {*} num 
 */
 function addComma(num) {
    // 숫자를 제외하고 모두 제거
    num = num.replace(/[^0-9]/g, '');
    // 정규식을 이용한 3자리마다 콤마 찍기
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
</script>

위의 예제 소스 코드를 보게 되면 input 요소에 keyup 이벤트를 추가해 준 소스와 콤마 처리를 해주는 addComma 함수가 있습니다.

$('#strNum').keuup() 이벤트를 활용하면 input 요소에 값을 입력할 때 이벤트가 실행되고, 이벤트에서는 입력값을 가로채서 콤마 처리를 해줄 수 있습니다.

addComma 함수에서는 입력값의 숫자만 제외하고 모두 제거를 해주는 부분과 숫자만 남은 입력값에서 천 단위 기준으로 콤마를 찍고 반환을 해주는 부분이 있습니다. 

그러면 어떻게 처리가 되는지 실행 결과를 확인해 보도록 하겠습니다.

---

실행 결과

위의 실행 결과처럼 입력하는 값에 콤마가 잘 찍히고 있는 모습입니다. 자바스크립트의 정규식을 활용하면 위의 결과처럼 간단하게 콤마 처리를 할 수 있습니다. 

 

 

반응형

---

마무리

오늘은 jQuery를 이용해서 input 요소의 입력값에 천단위 기준으로 콤마를 찍는 방법을 정리해 봤습니다. 구현 방법은 간단하지만 활용도가 엄청 높고, 실제 업무에서도 숫자를 다루는 입력값에는 많이 사용되는 기능입니다. 콤마뿐만 아니라 정규식을 활용한다면 숫자가 아니더라도 원하는 입력값으로 keyup 이벤트를 활용하여 포맷을 바꿔줄 수 있습니다. 

 

그럼 오늘도 저의 작고 소중한 글을 읽어주셔서 감사합니다.

 

 

---