[JAVASCRIPT] 숫자만 입력 받기, 숫자에 콤마 찍기

예를 들어 폼에 금액을 입력받는 경우, 숫자만 입력받아야 합니다.

또, 금액에 콤마(,)를 찍을 수 있다면 더 좋을 것입니다.

Javascript로 숫자만 입력할 수 있고, 자동으로 금액 콤마가 찍히도록 해보겠습니다.

 

---

 

1. 숫자만 입력 / 문자 제거

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, "");
    
    }
    
}

 

- event의 keyID를 받아와서 문자일 경우 입력이 되지 않도록 했습니다.

- 숫자만 입력하는 부분에 event.target.value.replace(/[^-\.0-9]/g, ""); 로 바꿔주면 소수점까지 입력할 수 있습니다.

 

 

2. 콤마 찍기

function comma(obj) {

    var regx = new RegExp(/(-?\d+)(\d{3})/);
    var bExists = obj.indexOf(".", 0);
    var strArr = obj.split('.');
    
    while (regx.test(strArr[0])) {
    
        strArr[0] = strArr[0].replace(regx, "$1,$2");
    }
    
    if (bExists > -1) {
        
        obj = strArr[0] + "." + strArr[1];
        
    } else { 
    
        obj = strArr[0];
        
    }
    
    return obj;
    
}

 

- 0번째부터 소수점(.)을 찾은 후, 문자열에 정규식 특수문자가 포함 되어있는지 체크합니다.

- 정수 부분에만 콤마를 달도록 했습니다.

 

- 소수점 문자열이 발견되지 않았을 경우 -1을 반환했습니다.

 

 

3. 콤마 풀기

function uncomma(str) {

    str = "" + str.replace(/,/gi, '');
    str = str.replace(/(^\s*)|(\s*$)/g, "");
    
    return (new Number(str));//문자열을 숫자로 반환
    
}

 

- str에서 콤마를 제거하고, 공백과 문자열을 제거했습니다.

- 마지막으로 문자열을 숫자로 반환했습니다.

 

 

4. input box에 콤마 달기

function inputNumberFormat(obj) {

    obj.value = comma(obj.value);
    
}

 

 

5. HTML 예제 코드

결제금액 :

<input type="text" name="price" id="price" onKeyUp="removeChar(event);inputNumberFormat(this);" onKeyDown="inputNumberFormat(this);">

 

- onKeyUp에 removeChar와 inputNumberFormat을 호출했습니다.

- onKeyDown에는 inputNumberFormat만 호출했습니다.

 

 

 

이상으로 Javascript로 숫자만 입력 받고, 숫자에 콤마 찍는 방법에 대해 알아봤습니다.

 

---