[JS] Input 숫자에 단위(콤마 ,) 넣는 방법

다음과 같이 숫자에 자릿수 구분을 위해 콤마(,)를 넣고 싶은 경우가 있다.

123456789
123,456,789

HTML

<input type="text" class="number" name="A" />

<input type="text" class="number" name="B" />

여러 개의 <input>에 이벤트를 모두 추가하기 위해서 class로 지정하였다.

중요한 건 Value로 문자가 들어가야 하기 때문에 Type이 “Text”이어야 한다.

JS

// 윈도우가 시작되자 마자 이벤트 등록
window.onload = function () {

      let inputs = document.getElementsByClassName("number");
      for (let input of inputs) {
          input.addEventListener("keyup", (event) => {
              let value = event.target.value;
              value = Number(value.replaceAll(',', ''));
              if (isNaN(value)) {         //NaN이면 빈칸
                  event.target.value = '';
              } else {                   //NaN이 아닌면 값
                  const formatValue = value.toLocaleString('ko-KR');
                  event.target.value = formatValue;
              }
          });
      }

  }

위에서 Type을 Text로 했기 때문에 Value에 콤마(,) 이외 문자가 있는지 없는지 체크를 한다.

만약 숫자만 있다면 값을 넣어주고 아니라면 빈문자를 넣는다.

toLocalString이란?

• toLocaleString는 숫자를 지역별 포맷으로 반환한다.(문자열로 반환)

인자 설명 예시

ko-KR	셋째자리에 콤마 추가	"1,234,000"
cs-CZ	셋째자리에 띄어쓰기 추가	"1 234 000"
da-DK	셋째자리에 온점 추가	"1.234.000"
de-CH	셋째자리에 따옴표 추가	"1’234’000"

유의 사항

let deposit = document.getElementsByName("deposit")[0].value; // 123,456
let withdrawal = document.getElementsByName("withdrawal")[0].value; // 123,456

deposit = Number(deposit.replaceAll(',', '')) // 123456
withdrawal = Number(withdrawal.replaceAll(',', '')) // 123456

나중에 input의 value를 가져오면 콤마(,)도 함께 반환된다!

때문에 CRUD 등의 기능을 이용할 때 꼭 문자 내 콤마를 모두 삭제해 주고 숫자로 변환을 해주어야 한다.