[JavaScript] Form Input Box에 , 자동 생성 기능 개발
input form에 숫자 관련 금액을 입, 출금하기 위해 숫자를 입력할 시, 자동으로 콤마(,)를 생성하는 기능을 개발하고자 합니다.
먼저 Input box에 콤마를 찍어주기 위한 정규식을 기반으로 한 자바스크립트 함수를 제작한다.
<script>
function inputNumberFormat(obj) {
obj.value = comma(uncomma(obj.value));
}
function comma(str) {
str = String(str);
return str.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}
function uncomma(str) {
str = String(str);
return str.replace(/[^\d]+/g, '');
}
</script>
콤마를 찍기 위한 대표적인 방식은 .toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') 이다.
콤마 생성을 위한 함수는 https://mi-nya.tistory.com/248 님의 블로그를 참고했습니다ㅎㅎ
그 후, Form의 Input에 value="" onkeyup="inputNumberFormat(this)"를 추가하여 주었다.
이 방식을 적용하니, Form의 Input Box에 숫자를 입력하면 자동으로 콤마가 생성이 되었다!!
하지만... 이 방식을 통해 진행했을 시, let queryString = $("form[name=exchangeSendForm]").serialize()
이와 같이 .serialize()를 사용해서 폼을 전송하려 하니 API에서 500 에러가 난다.
아마도 콤마(,) 값이 '%2c'로 읽히는 것 같다..
즉, 10,000을 입력하면 10%2c000 이렇게 읽혀 값을 제대로 받아올 수 없기에 발생하는 문제인 것 같다.
이를 해결하기 위해 .serialize()를 하기 전 Form에서의 콤마(,) 제거 방식을 활용한다면 해결할 수 있을 것이라 생각되어 (,) 제거를 진행했다.
Form에서의 콤마(,) 제거 방식은 https://pjsprogram.tistory.com/48 님의 블로그를 참고했다!!
var targetForm = $("#exchangeSendForm:input");
$.each(targetForm, function(index, elem){
$(this).val($(this).val().replace(/,/g, ''));
});
var frm = $("#exchangeSendForm").serialize();
이를 이용하여 Form을 .serialize() 전 replace를 통한 콤마(,) 제거를 진행하니 API 폼 전송이 정상적으로 되었다!!
여기서 사용된 콤마를 제거하기 위한 대표적인 방법은 .replace(/,/g, '')); 이고 여기서 g를 제거한다면 콤마가 여러 개라면 제일 처음의 콤마만 제거됨으로 g를 붙여줘야 text의 안의 모든 콤마를 제거할 수 있다!!
이렇게 또 하나를 배워간다ㅎㅎ