JavaScript - 가격(숫자)입력시 자동 , 찍기

 

목적 : 사용자 인터페이스에서 금액을 (숫자)만 입력하게 했을시에 천단위 로 자동으로 , 가 찍히게 보이게 되는 것

Tip : onkeyup event를 사용해서 한다.

 

---

 

Jsp

<div class="r">
	<label for="LOAN_AMT">대출 금액</label>
	<input type="text" name="COMP_AMT" id="LOAN_AMT" onkeyup="chkNumber(this)"><br>
</div>

 

---

JavaScript

ex) 예를들어 사용자가 1300000이라는 숫자를 입력했을때

진행 순서 (1) ~> (4)

<script type="text/javascript">
  // 천단위 콤마 (소수점포함)
  function numberWithCommas(num) {
    var parts = num.toString().split(".");	// (3)    ['1300000']
    return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : "");
    								//  (4) '1,300,000''
  }

  // 숫자 체크(숫자 이외 값 모두 제거)
  function chkNumber(obj){
    var tmpValue = $(obj).val().replace(/[^0-9,]/g,'');	// (1)   1,300,000
    tmpValue = tmpValue.replace(/[,]/g,'');					// (2)   1300000 제거함
    // 천단위 콤마 처리 후 값 강제변경
    obj.value = numberWithCommas(tmpValue);
  }
</script>

 

결과

ex) 숫자만 입력했음