[Jquery] - Input text 키 입력시 3자리 콤마 찍기(펌)
Jquery & Mobile 2012. 1. 17. 18:24출처 :
http://www.zemy.net/tc/zemyblue/134
밑에서 만들었던 javascript를 jQuery의 Plugin으로 개발했다.
기능은 동일하게 숫자의 3자리마다 자릿표시로 콤마(,)를 표시할 수 있고, 문자가 입력되면 제거한다.
jQuery의 체인연결이 가능하도록 했다.
두개의 메소드를 구현했다.
- toPrice(cipher)
- 엘리멘트의 value에서 문자열을 제거한 숫자값에 3자리수마다 콤마(,)로 구분해 금액형태로 변경하고 엘리멘트 체인을 반환한다.
- toPrice에 cipher의 숫자를 넣으면 해당 숫자의 자릿수만큼 콤마로 자릿수를 표시한다. 값을 넣지 않으면 자동으로 3이 설정된다.
- getOnlyNumber(data)
- 엘리멘트의 value에서 문자를 제거한 숫자만을 반환한다.
- data값이 있을 경우에는 선택된 엘리멘트에 data에서 문자를 제거한 숫자만의 집합을 value값으로 대입하고 해당 엘리멘트를 체인 반환한다.
- data값이 없을 경우에는 선택된 엘리멘트의 value에서 문자를 제거한 숫자 집합을 문자열로 반환한다.
주의 : 하지만 이 plugin은 21자리의 숫자까지만 처리가능하다. 그리고 음수와 실수는 표현하지 못한다.
이 데모는 여기에서 확인해 볼 수 있다.
다음은 plugin의 full source이다.
(function($) {
$.fn.toPrice = function(cipher) {
var strb, len, revslice;
strb = $(this).val().toString();
strb = strb.replace(/,/g, '');
strb = $(this).getOnlyNumeric();
strb = parseInt(strb, 10);
if(isNaN(strb))
return $(this).val('');
strb = strb.toString();
len = strb.length;
if(len < 4)
return $(this).val(strb);
if(cipher == undefined || !isNumeric(cipher))
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 $(this).val(revslice.join(','));
}
$.fn.getOnlyNumeric = function(data) {
var chrTmp, strTmp;
var len, str;
if(data == undefined) {
str = $(this).val();
}
else {
str = data;
}
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);
}
}
if(data == undefined)
return strTmp;
else
return $(this).val(strTmp);
}
var isNumeric = function(data) {
var len, chrTmp;
len = data.length;
for(var i=0; i<len; ++i) {
chrTmp = str.charCodeAt(i);
if((chrTmp <= 47 && chrTmp > 31) || chrTmp >= 58) {
return false;
}
}
return true;
}
})(jQuery);
이 plugin은 다음의 html 구문에서 테스트 해볼 수 있다.
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="jquery.money.js" ></script>
<script type="text/javascript">
$(function() {
$('#price').keyup(function(event) {
$(this).toPrice();
var strText = $(this).getOnlyNumeric();
// var strText = getOnlyNumeric($(this).val());
$('#number').text(strText);
})
});
</script>
<body>
<input type="text" id="price" name="price" style="text-align: right;" /><br>
<div id="number"></div>
</body>
</html>
'Jquery & Mobile' 카테고리의 다른 글
| [JqueryMobile] - 로딩이미지 출력 함수 예제(JqueryMobile) (0) | 2012.02.01 |
|---|---|
| [JqueryMobile] - Scrollview Refresh, Scrollview 영역 다시 잡기 함수예제 (0) | 2012.01.25 |
| [Jquery] - Multiple Select Box 박스간 데이터 전송법 (0) | 2012.01.13 |
| [Jquery] - jquerymobile mobileinit 이벤트(사용법 펌) (0) | 2012.01.06 |
| [Jquery & Mobile] - Jquery Background-img Syntax 제이쿼리 백그라운드 이미지 넣는법 (0) | 2011.12.15 |