Notice
Recent Posts
Recent Comments
Link
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

투덜이 개발자

[jquery] 숫자 3자리(천단위) 마다 콤마 찍기 본문

Program Language/JavaScript & Jquery

[jquery] 숫자 3자리(천단위) 마다 콤마 찍기

엠투 2025. 3. 14. 14:22
반응형

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form name="frm_exam_detail_info">
	<table>
		<tr>
			<td><span class="subContentsItemTitle">피험비용</span></td>
			<td>
				<input type="text" class="form-control form-control-sm col-11"
					   name="exam_price" id="exam_price" value="0" placeholder=""
					   maxlength="8"
					   onfocus="$.numberFormat.handleInputFocus(this)"
					   onkeyup="$.numberFormat.handleInputKeyup(this)"
					   onblur="$.numberFormat.handleInputBlur(this, event)">
			</td>
			<td><span class="subContentsItemTitle">추가 피험비용</span></td>
			<td>
				<input type="text" class="form-control form-control-sm col-11"
					   name="exam_price_add" id="exam_price_add" value="0" placeholder=""
					   maxlength="11"
					   onfocus="$.numberFormat.handleInputFocus(this)"
					   onkeyup="$.numberFormat.handleInputKeyup(this)"
					   onblur="$.numberFormat.handleInputBlur(this, event)">
			</td>
			<td><span class="subContentsItemTitle">추가 피험비용2</span></td>
			<td>
				<input type="text" class="form-control form-control-sm col-11"
					   name="exam_price_add2" id="exam_price_add2" value="0" placeholder=""
					   maxlength="12"
					   onfocus="$.numberFormat.handleInputFocus(this)"
					   onkeyup="$.numberFormat.handleInputKeyup(this)"
					   onblur="$.numberFormat.handleInputBlur(this, event)">
			</td>
		</tr>
	</table>
</form>
<script>
$(function () {
	$.numberFormat = {
		/**
		 * 입력된 숫자의 길이를 제한하는 함수
		 * @param {string} no - 입력된 숫자 문자열
		 * @param {number} length - 허용되는 최대 길이
		 * @returns {string} - 길이가 제한된 숫자 문자열
		 */
		checkNumLength: function (no, length) {
			let nNum = String(no).replace(/\..*|[^\d]/g, ""); // 숫자 이외의 문자 제거
			if (nNum.length > parseInt(length, 10)) {
				nNum = nNum.substring(0, length); // 최대 길이 초과 시 자름
			}
			return nNum;
		},
		
		/**
		 * 천 단위 콤마(,)를 추가하는 함수
		 * @param {string} num - 숫자 문자열
		 * @returns {string} - 천 단위 콤마가 추가된 숫자 문자열
		 */
		formatNumber: function (num) {
			if (isNaN(num) || num === "") return "";
			return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
		},
		
		/**
		 * 입력 필드에 포커스를 줄 때 실행되는 함수
		 * '0'이면 빈 문자열로 변경하여 입력을 쉽게 함
		 * @param {HTMLInputElement} input - 입력 필드 요소
		 */
		handleInputFocus: function (input) {
			if (input.value === '0') input.value = '';
		},
		
		/**
		 * 입력 중 숫자만 남기고 처리하는 함수 (천 단위 콤마 없이)
		 * @param {HTMLInputElement} input - 입력 필드 요소
		 */
		handleInputKeyup: function (input) {
			let value = input.value.replace(/[^\d]/g, ''); // 숫자만 남기기
			
			// 첫 숫자가 '0'일 경우 제거 (예: '0123' → '123')
			if (value.length > 1 && value.startsWith('0')) {
				value = value.substring(1);
			}
			
			input.value = value;  // 입력 중에는 천 단위 콤마 없이 숫자만 표시
		},
		
		/**
		 * 입력 필드에서 포커스가 벗어날 때 천 단위 콤마를 적용
		 * @param {HTMLInputElement} input - 입력 필드 요소
		 * @param {Event} event - 블러 이벤트
		 */
		handleInputBlur: function (input, event) {
			const relatedTarget = event.relatedTarget;
			
			// 입력 필드 외부를 클릭하거나 탭 키로 포커스가 이동했을 때 처리
			if (relatedTarget !== input) {
				if (input.value === '') {
					input.value = '0'; // 빈 값이면 '0'으로 설정
				} else {
					// 숫자 길이 제한 및 천 단위 콤마 적용
					input.value = $.numberFormat.formatNumber($.numberFormat.checkNumLength(input.value, input.maxLength));
				}
			}
		}
	};
});
</script>
</body>
</html>

 

코드를 줄여보자..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form name="frm_exam_detail_info">
    <table>
        <tr>
            <td><span class="subContentsItemTitle">피험비용</span></td>
            <td><input type="text" class="form-control form-control-sm col-11 number-input" name="exam_price" id="exam_price" value="0" maxlength="8"></td>
            <td><span class="subContentsItemTitle">추가 피험비용</span></td>
            <td><input type="text" class="form-control form-control-sm col-11 number-input" name="exam_price_add" id="exam_price_add" value="0" maxlength="11"></td>
            <td><span class="subContentsItemTitle">추가 피험비용2</span></td>
            <td><input type="text" class="form-control form-control-sm col-11 number-input" name="exam_price_add2" id="exam_price_add2" value="0" maxlength="12"></td>
        </tr>
    </table>
    <br>
    <input type="text" class="form-control form-control-sm" name="general_text" id="general_text" placeholder="일반 텍스트 입력"> <!-- 일반 텍스트 입력 필드 -->
</form>
<script>
$(function () {
    const formatNumber = num => num.replace(/\B(?=(\d{3})+(?!\d))/g, ",");

    $(".number-input").on({
        focus: function() { if (this.value === '0') this.value = ''; },
        keyup: function() { this.value = this.value.replace(/[^\d]/g, '').replace(/^0+(\d)/, '$1'); },
        blur: function() { this.value = this.value ? formatNumber(this.value.slice(0, this.maxLength)) : '0'; }
    });
});
</script>
</body>
</html>
반응형
저작자표시

'Program Language > JavaScript & Jquery' 카테고리의 다른 글

JavaScript Web Speech TTS  (0) 2024.12.05
[JS] 자바스크립트 비밀번호 검증 정규식 8자이상 12자이하 영문, 숫자, 특수문자 조합  (0) 2024.03.22
JQuery checkbox 컨트롤  (0) 2023.12.04
[javascript/select2] bootstrap select2 선택값 변경  (0) 2023.09.13
[bootstrap] ESC 또는 클릭 시 Modal 닫힘 방지  (0) 2023.06.15
'Program Language/JavaScript & Jquery' Related Articles more