금액에서 자릿수를 표시해 주는 Javascript :: 2008/10/02 15:13
가계부에서 금액을 입력할 때 3자리마다 콤마(,)를 입력해야 금액을 쉽게 구분할 수 있을 것 같아서
기본적으로 3자릿수마다 ,를 자동으로 찍어주는 Javascript를 만들었다. 만들고 나서보니 문자열이 들어가면 자동으로 지우고 그리고 앞의 숫자가 0일 경우에는 0을 제거하는 로직까지 추가해 보니 쓸만한 금액 표시기가 된것 같다.
그리고 좀더 범용성을 위해서 2번째에 자릿수를 입력하게 해서 미화 같은 경우에는 4자릿수마다 표시하므로 4를 입력하면 4번째 자릿수마다 ,로 표시를 해준다. 설마 구분자를 콤마(,)말고 다른 것을 사용하는 없겠지 ^^
// 입력되는 값을 3자리마다 콤마(',')를 표시할 수 있게 한다.
// cipher로 ,를 표시한 자릿수를 입력한다. 입력하지 않으면 기본값으로 3이 설정된다.
function toPrice(money, cipher) {
var len, strb, revslice;
strb = money.toString();
strb = strb.replace(/,/g, '');
strb = getOnlyNumeric(strb);
strb = parseInt(strb, 10);
if(isNaN(strb))
return '';
strb = strb.toString();
len = strb.length;
if(len < 4)
return strb;
if(cipher == undefined)
cipher = 3;
count = len/cipher;
slice = new Array();
for(var i=0; i<count; ++i) {
if(i*cipher >= len)
break;
slice[i] = strb.slice((i+1) * -cipher, len - (i*cipher));
}
revslice = slice.reverse();
return revslice.join(',');
}
// 문자열을 제거하고 숫자만 반환한다.
function getOnlyNumeric(str) {
var chrTmp, strTmp;
var len;
len = str.length;
strTmp = '';
for(var i=0; i<len; ++i) {
chrTmp = str.charCodeAt(i);
if((chrTmp > 47 || chrTmp <= 31) && chrTmp < 58) {
strTmp = strTmp + String.fromCharCode(chrTmp);
}
}
return strTmp;
}
사용 예제로 다음을 만들어서 테스트할 수 있다.
<script type="text/javascript" src="money.js" ></script>
<script type="text/javascript">
function money() {
priceButton = document.getElementById("price");
// alert("priceButton : "+priceButton.value);
num = toPrice(priceButton.value);
priceButton.value = num;
document.getElementById('number').innerText = getOnlyNumeric(num);
}
</script>
<body>
<input type="text" id="price" name="price" style="text-align: right;" onkeyup="money()" /><br>
<div id="number"></div>
</body>
</html>
이제 이걸 jQuery Plugin 으로 만들어야 겠다. ^^
다음은 예제 파일이다.
money.zip
(0) 
(0)