금액) 숫자 세자리마다 , 넣어주기

돈과 관련된 금액단위를 표시할 때에는 우측정렬과 함께 세자리 숫자마다 ','를 넣어 쉽게 금액을 확인 할 수 있도록 해야한다.

NumberFormat

해당 클래스를 사용하기 위해서 jsp에서는 java.text class를 import 해주어야 한다.

1	<%@ page import="java.text.*" %>

그리고 NumberFormat Class를 선언해준다.

1	NumberFormat nf = NumberFormat.getNumberInstance();

onkeyup Event

입력을 받을 input TAG에 onkeyup Event를 발생시켜 입력과 동시에 세자리 수마다 ,가 찍힐수 있도록 한다.

1 2 3 4 5 6

<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2 margin-bottom-10"> <label class="control-label">금액</label> <input type="text" class="form-control input-sm" style="text-align:right;" name="price" id="price" onkeyup="onlyNum(this);this.value=this.value.comma();"> <span class="help-block">단위 : 원</span> </div> <!--/span-->

Java script

해당 onkeyup 메소드가 실행되는 javascript를 선언해준다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

String.prototype.comma = function() {   tmp = this.split('.');   var str = new Array();   var v = tmp[0].replace(/,/gi,'');       for(var i=0; i<=v.length; i++) {     str[str.length] = v.charAt(v.length-i);           if(i%3==0 && i!=0 && i!=v.length) {       str[str.length] = '.';     }   }   str = str.reverse().join('').replace(/\./gi,',');   return (tmp.length==2) ? str + '.' + tmp[1] : str; }   function onlyNum(obj) {   var val = obj.value;   var re = /[^0-9\.\,\-]/gi;   obj.value = val.replace(re, ''); }

그리고 사용시 주의 할 점은,

직접 입력하는 것이 아닌 값을 불러오는 경우에는 int 형만 인식할 수 있으며, 위에서 선언해준 NumberFormat으로 표현해주어야 한다. 또한, 해당 input 값을 parameter 형식으로 넘길 경우에 숫자와 , 가 같이 넘어가니 받는 곳에서 replace를 통해 ,를 없애주도록하자

1 2	int price = 0; nf.format(price);

위와 같이 사용하지 않으면 에러가 발생하니 주의가 필요하다.