[JavaScript] input 숫자 3자리마다 콤마(,) 넣기

은행앱에서 이체할 때 금액을 입력하면 보통 자동으로 숫자 3자리마다 쉼표가 생긴다.

그렇게 하면 금액이 커져도 알아보기 편하다.

 

예전에는 이런걸 만들 때 inputmask 등의 플러그인을 많이 이용했는데 이제는 직접 만들어보기로 했다.

하지만 정규식은 검색을 통해 퍼왔다.

 

html input을 이용할 때 type=number가 아니라 text를 주로 많이 쓰는데 별다른 조치를 하지 않으면 그냥 키보드에 치는 그대로 입력되는데 금액이나 큰 숫자를 입력해야 할 때 키보드 이벤트를 통해 숫자만 입력되도록 하면서 3자리마다 콤마까지 찍히도록 해봤다.

정규식, input 이벤트를 활용하여 우선 입력된 값에서 숫자만 남기고 다 없앤 다음 3자리마다 콤마를 찍어 value를 바꾼다.

 

<input type="text" id="testInput" />
<script>
    function inputAutoComma(el) {
        el.addEventListener("input", function(e) {
            var val = e.target.value.replace(/[^0-9]/g, "");
            e.target.value = val.replace(/\d(?=(?:\d{3})+$)/g, '$&,');
        });
    }
    inputAutoComma(document.getElementById("testInput"));
</script>

 

함수를 생성하기 싫을 때는 그냥 input에 oninput 속성으로도 가능하다.

<input type="text" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\d(?=(?:\d{3})+$)/g, '$&,')" />