Web/JavaScript & JQuery
[JavaScript] 천단위 콤마 찍기, 소수점 포함
쩨리쩨리
2018. 11. 20. 12:43
반응형
javascript 정규식을 사용하여 input text box에 입력받는 숫자들을 천단위로 콤마를 찍어보자.
물론 소수점도 입력된다.
JavaScript
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 31 32 33 34 35 36 37 38 39 40 41 42 | //문자 제거 function removeChar(event) { event = event || window.event; var keyID = (event.which) ? event.which : event.keyCode; if (keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39) return; else //숫자와 소수점만 입력가능 event.target.value = event.target.value.replace(/[^-\.0-9]/g, ""); } //콤마 찍기 function comma(obj) { var regx = new RegExp(/(-?\d+)(\d{3})/); var bExists = obj.indexOf(".", 0);//0번째부터 .을 찾는다. var strArr = obj.split('.'); while (regx.test(strArr[0])) {//문자열에 정규식 특수문자가 포함되어 있는지 체크 //정수 부분에만 콤마 달기 strArr[0] = strArr[0].replace(regx, "$1,$2");//콤마추가하기 } if (bExists > -1) { //. 소수점 문자열이 발견되지 않을 경우 -1 반환 obj = strArr[0] + "." + strArr[1]; } else { //정수만 있을경우 //소수점 문자열 존재하면 양수 반환 obj = strArr[0]; } return obj;//문자열 반환 } //콤마 풀기 function uncomma(str) { str = "" + str.replace(/,/gi, ''); // 콤마 제거 str = str.replace(/(^\s*)|(\s*$)/g, ""); // trim()공백,문자열 제거 return (new Number(str));//문자열을 숫자로 반환 } //input box 콤마달기 function inputNumberFormat(obj) { obj.value = comma(obj.value); } //input box 콤마풀기 호출 function uncomma_call(){ var input_value = document.getElementById('input1'); input_value.value = uncomma(input_value.value); } | cs |
Html
1 2 3 4 | <input type="text" id="input1" placeholder="숫자를 입력해주세요" onKeyUp="removeChar(event);inputNumberFormat(this);" onKeyDown="inputNumberFormat(this);" > <input type="button" onClick="uncomma_call();" value="콤마 풀기 버튼"> | cs |
구현 모습
숫자를 입력받으면 자동으로 3자리 단위로 소수점이 찍힌다.
콤마 풀기 버튼을 클릭하면 콤마가 찍혀있던 숫자들이 콤마가 풀린다.
반응형