[jquery]금액 입력 시 콤마(,)와 "원" 표시하는 방법

프로젝트를 진행하는 도중에 사업 금액을 입력하여 관리 및 계산하는 요구사항을 받게 되었다. 간단히 사업 금액과 품목 별 금액을 입력하면 투입 인력 대비 금액을 계산하고 활용하는, 간단한 요구사항이었다. 그래서 문득 '사용자가 금액을 숫자로만 입력하되, 입력 후 3자리마다 콤마(,)와 원을 표시해주면 어떨까'라는 생각이 떠올랐다. 그래서 이번엔 jquery를 활용하여 금액 입력 시 콤마(,)와 "원" 표시하는 방법을 알아보겠다.

<label for="rcvordAm">수주액</label>
<input type="text" id="rcvordAm" name="rcvordAm" numberOnlyMinComma="true" koreanCurrency="true" value="" required="required">

html의 input 영역에서 중점적으로 확인해야 할 부분이 바로

numberOnlyMinComma="true"

koreanCurrency="true"

두 가지이다. 이 부분은 아래 설명할 jquery에서 어떤 input 영역에 적용할지 확인하는 부분이다.

$(document).on("keyup", "input:text[numberOnlyMinComma]", function()	{
	var strVal = $(this).val();

	event = event || window.event;
	var keyID = (event.which) ? event.which : event.keyCode;

	if( ( keyID >=48 && keyID <= 57 ) || ( keyID >=96 && keyID <= 105 )
				|| keyID == 46 || keyID == 8 || keyID == 109
				|| keyID == 189 || keyID == 9
				|| keyID == 37 || keyID == 39){

		if(strVal.length > 1 && (keyID == 109 || keyID == 189)){
			return false;
		}else{
			return;
		}
	}else{
		return false;
	}
});

$(document).on("keyup", "input:text[numberOnlyMinComma]", function()	{
	$(this).val( $(this).val().replace(/[^-\.0-9]/gi,"") );
	$(this).val( $(this).val().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") );
});

numberOnlyMinComma="true"는 숫자와 콤마(,) 이외의 문자는 입력할 수 없도록 하는 기능이다. keyup을 사용하여 키 입력 후 여부를 확인하여 숫자와 콤마(,)가 아닐경우 공백으로 바꾸어 입력이 되지 않도록 구현하였다.

$(document).on("focusout", "input:text[koreanCurrency]", function()	{
	$(this).val( $(this).val().replace(",","") );
	$(this).val( $(this).val().replace(/[^-\.0-9]/gi,"") );
	$(this).val( $(this).val().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") );
	if($(this).val() != '' ) {
		$(this).val( $(this).val()+'원');
	}		
});

$(document).on("focus", "input:text[koreanCurrency]", function()	{	
	$(this).val( $(this).val().replace("원", ""));
});

koreanCurrency="true"은 두 가지로 나누어 구현하였는데

하나는 입력 후 focus가 벗어났을 때(focusout) 자동으로 3자리마다 콤마(,)와 한글 '원'이 표시되도록 하는 함수,

다른 하나는 입력을 위해 input영역을 클릭하였을 때 기존에 입력된 데이터에 한글 '원'을 지워 숫자가 입력이 되도록 하는 함수이다.

예를 들면, input영역에 "123456"을 입력한 경우, focusout이 감지되면 "123,456원"으로 자동변환이 실행되고,

다시 수정을 위해 "123,456원"이 입력된 input 영역 focus가 이동하면 "123,456"으로 숫자와 콤마(,)만 나오도록 변환된다.