숫자로 입력할때 자동콤마기능
본문
숫자로 입력하는 박스인데 3자리마다 콤마가 들어가게 하고싶으면 어떻게해야 할지해서
여쭈어봅니다.
<input type='text' required class="frm_input full_input required" name='wr_1' value='<?php echo $write['wr_1']?>' style='max-width:200px; width:100%'>
답변 2
돈 단위때문에 콤마가 필요한거죠?
<input type='text' required class="frm_input full_input required" name='wr_1' id='wr_1'
value='<?php echo number_format($write['wr_1'])?>'
style='max-width:200px; width:100%'
oninput="formatCurrency(this)">
<script>
function formatCurrency(input) {
// 숫자가 아닌 문자 제거
var value = input.value.replace(/[^\d]/g, '');
// 숫자를 천 단위로 쉼표 추가
value = new Intl.NumberFormat().format(value);
// 포맷된 값을 입력 필드에 설정
input.value = value;
}
</script>
감사합니다.
숫자 입력 시 3자리마다 자동으로 콤마를 추가하되,
백엔드로는 원본 숫자 값이 정확하게 전달되도록 hidden 필드를 활용하는 방식이 최적.
또한, 음수및 소수점 입력을 허용하여 실수 값을 입력할 수 있도록 하고,
페이지 로드 시 기존 값도 자동 포맷되도록 함
이를 위해 oninput 이벤트를 활용한
동적 포맷팅과 DOMContentLoaded 이벤트를 통한 초기 값 변환을 함께 적용.
※ 최적의 구현 방안
<input type="text" required class="frm_input full_input required" name="wr_1_display"
id="wr_1_display" style="max-width:200px; width:100%" oninput="formatCurrency(this)">
<input type="hidden" name="wr_1" id="wr_1">
<script>
document.addEventListener("DOMContentLoaded", function() {
var input = document.getElementById('wr_1_display');
formatCurrency(input);
});
function formatCurrency(input) {
var value = input.value.replace(/,/g, ''); // 기존 쉼표 제거
if (!/^-?\d*\.?\d*$/.test(value)) { // 숫자, 소수점, 음수만 허용
input.value = input.value.slice(0, -1);
return;
}
var formattedValue = new Intl.NumberFormat().format(value);
input.value = formattedValue; // 포맷된 값 표시
document.getElementById('wr_1').value = value; // 실제 값 저장
}
</script>
＊hidden 필드를 추가하여 원본 숫자 값만 서버로 전송
- 입력된 값에서 쉼표가 제거된 원본 숫자 값을 wr_1에 저장하여
PHP 처리 시 정확한 값이 유지됨.
＊초기 로딩 시 자동 포맷 적용 (DOMContentLoaded 이벤트 활용)
- 기존에 DB에서 가져온 값이 즉시 포맷되어 표시됨.
＊소수점과 음수(-) 입력 허용
- /-?\d*\.?\d*/ 정규식을 사용하여 유효한 숫자 입력만 가능하게 함.
＊잘못된 문자 입력 방지
- 숫자가 아닌 문자가 입력되면 자동으로 제거하여 오류를 방지.
※ 해당 기능이 정상 작동하는지 JavaScript 코드를 실행한, 숫자 포맷 변환 테스트 결과
답변너무감사합니다. 먼저 답변주신분것도 적용해보니 문제가 없어 채택을 못해드린점 양해부탁드립니다. ^^^
(●'◡'●)
