Script로 천자리 구분자

coding S's avatar
Apr 26, 2024
Script로 천자리 구분자

[ 상세보기 시, 천자리 구분자가 나온 상태로 보여주게 하기 ]

$(document).ready(function() { // 가격 표시 var price = $('input[name="price"]').val(); $('input[name="price"]').val(priceToString(parseInt(price))); // 수량 표시 var qty = $('input[name="qty"]').val(); $('input[name="qty"]').val(qtyToString(parseInt(qty))); }); function priceToString(price) { return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); } function qtyToString(qty) { return qty.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); }
notion image

[ 이벤트를 캐치해서 적을때 구분자가 찍히게 하기 ]

$(document).ready(function() { // 가격 입력 필드에 대한 이벤트 리스너 추가 $('#price').on('input', function() { // 입력된 값에서 숫자만 추출 var number = $(this).val().replace(/[^0-9]/g, ''); // 천 단위 구분자 적용 var changeNum = number.replace(/\B(?=(\d{3})+(?!\d))/g, ','); // 변환된 값으로 입력 필드 업데이트 $(this).val(changeNum); }); $('#qty').on('input', function() { // 입력된 값에서 숫자만 추출 var number = $(this).val().replace(/[^0-9]/g, ''); // 천 단위 구분자 적용 var changeNum = number.replace(/\B(?=(\d{3})+(?!\d))/g, ','); // 변환된 값으로 입력 필드 업데이트 $(this).val(changeNum); }); // 폼 제출 전 실행될 이벤트 $('form').on('submit', function() { // 가격과 수량 입력 필드에서 천 단위 구분자 제거 var price = $('#price').val().replace(/,/g, ''); $('#price').val(price); // 수량 필드에 대해서도 같은 처리를 수행 var qty = $('input[name="qty"]').val().replace(/,/g, ''); $('input[name="qty"]').val(qty); }); });
notion image
1. 페이지 로딩 시 가격과 수량 필드 초기화 페이지가 로딩될 때, 가격과 수량 필드에 이미 입력되어 있는 값(만약 있다면)을 가져와서 천 단위로 콤마(,)를 넣어서 다시 입력필드에 설정. 2. 실시간 입력 포맷팅 가격과 수량 필드에 입력이 이루어질 때마다, 사용자가 입력한 값에서 숫자가 아닌 문자를 제거하고, 숫자 사이에 콤마를 삽입하여 가독성을 높인다. (ex. "1000"을 입력하면 "1,000"으로 표시) 3. 폼 제출 전 처리 폼을 제출하기 전에, 가격과 수량 필드에서 모든 콤마를 제거하여 순수한 숫자 데이터로 변환. -> 서버에서 데이터를 처리할 때 오류를 방지하기 위함
 
Share article

codingb