깜놀하는 해므찌로

Egov Spring JavaScript 자바 스크립트 숫자 콤마 처리 / 숫자 천단위 , 콤마 처리 예시 본문

IT

Egov Spring JavaScript 자바 스크립트 숫자 콤마 처리 / 숫자 천단위 , 콤마 처리 예시

agnusdei1207 2022. 8. 5. 08:36
반응형
SMALL

1. 사진처럼 사용 금액 부분을 콤마처리 해보자

$(function(){                     
	$("#price").val($("#price").val().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",")); // 콤마 처리
});

 

2. repace 함수를 활용하여 천단위 마다 , 콤마를 찍도록 설정

3. 페이지가 처음 로드되었을 때 콤마 처리될 수 있도록 함수 호출

<%-- 등록 --%>    
function fncSubmit(){   
	$("#price").val($("#price").val().replaceAll(",", "")); // 가격 콤마 제거
	fncPageBoard(); // 데이터 전송 함수
	return false;    
}

<%-- 삭제 --%>
function fncDelete(seq){     
	$("#price").val($("#price").val().replaceAll(",", "")); 
	fncPageBoard('del','deleteProc.do', 'elSeq', ""+seq+"");
}       
 
<%-- 목록 & 취소 --%> 
function fncList(){
	$("#price").val($("#price").val().replaceAll(",", "")); 
	fncPageBoard('list','list.do');
}

4. 숫자에 콤마가 같이 포함되어 전달되면 DB 혹은 컨트롤러에서 오류를 발생시킬 수 있으므로 콤마를 빈 값으로 치환

$('#price').on('input', function(){
	this.value=this.value.replace(/[^0-9]/g,'').replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
});

5.. 입력 시 즉각 콤마 처리

반응형
LIST