Javascript) 숫자만 입력 + 3자리마다 콤마(,) 표시하기 예제

자바스크립트 화폐 /금액 입력 예제

(숫자만 입력 + 3자리마다 콤마 표시)

 

 

 

보통 input 박스에 금액을 입력할 때에 천 단위인 3자리마다 콤마를 찍도록 제어하는데요,

여기에 숫자만 입력하도록 제어가 함께 들어가도록 예제를 작성해보겠습니다.

 

 

---

 

정규식을 사용하는 방법도 있지만, 

자동으로 콤마를 찍어주는 toLocalString() 을 사용했습니다.

 

toLocalString()은 Number()로 문자열을 숫자형으로 바꾼 후 사용 가능합니다.

 

 

1. 자바스크립트 함수 부분

    function onlyNumberWithComma(obj) {
      var number = obj.value;

      //숫자가 아닌 값 모두 replace 해주기
      number=number.replace(/[^0-9]/g,'');

      //콤마 표시
      number=Number(number).toLocaleString();
      
      //다시 value 지정해주기
      obj.value = number;
    }

2. html 코드 부분

<input type="text" oninput="onlyNumberWithComma(this);"/>

 

인풋박스의 oninput에 위 함수를 걸어주게되면,  

잘못된 값이 입력되었다가 지워지는 등의 액션이 보이지 않아 아래와 같이 깔끔하게 입력됩니다.

 

 

 

 

위 3줄짜리 자바스크립트 코드를 주석없이 한줄로 간단히 정리해보면 아래와 같습니다.

function onlyNumberWithComma(obj) {
  obj.value = Number(obj.value.replace(/[^0-9]/g,'')).toLocaleString();
}

 

실제로 사용할때는 한줄짜리로 사용하는게 깔끔하겠네요!

 

 

도움이 되셨길 바랍니다!