[JavaScript] 천단위 이상의 입력값에 자동콤마( , ) 삽입[JavaScript] 천단위 이상의 입력값에 자동콤마( , ) 삽입

Posted at 2018. 8. 20. 18:07 | Posted in JavaScript & jQuery/JavaScript
반응형




■ 천단위 이상의 입력값에 자동콤마( , ) 삽입




# 소스코드

<html>
<head>
<title>:: 천단위 콤마 자동 삽입 ::</title>
<script type="text/javascript">
    function inputNumberAutoComma(obj) {
       
        // 콤마( , )의 경우도 문자로 인식되기때문에 콤마를 따로 제거한다.
        var deleteComma = obj.value.replace(/\,/g, "");

        // 콤마( , )를 제외하고 문자가 입력되었는지를 확인한다.
        if(isFinite(deleteComma) == false) {
            alert("문자는 입력하실 수 없습니다.");
            obj.value = "";
            return false;
        }
       
        // 기존에 들어가있던 콤마( , )를 제거한 이 후의 입력값에 다시 콤마( , )를 삽입한다.
        obj.value = inputNumberWithComma(inputNumberRemoveComma(obj.value));
    }
   
    // 천단위 이상의 숫자에 콤마( , )를 삽입하는 함수
    function inputNumberWithComma(str) {

        str = String(str);
        return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, "$1,");
    }

    // 콤마( , )가 들어간 값에 콤마를 제거하는 함수
    function inputNumberRemoveComma(str) {

        str = String(str);
        return str.replace(/[^\d]+/g, "");
    }
</script>
</head>
<body>
    <h2>숫자를 입력해 주세요.</h2>
    <input type="text" onKeyup="inputNumberAutoComma(this);" value="" style="text-align:right;"/>
</body>
</html>




# 출력결과











■ 천단위 자동콤마( , ) 삽입 및 소수점 표현




# 소스코드

<html>
<head>
<title>:: TEXT 박스 자동 콤마 삽입 + 소수점 기호 ::</title>
<script language="javascript">
function inputNumberAutoComma(obj) {
    
    var number = obj.value;
    var integer = obj.value;
    var point = number.indexOf(".");
    var decimal = "";
    var chekcd = "";

    // 첫번째 수부터 소수점 기호( . )를 사용 방지
    if(number.charAt(0) == ".") {
        alert("첫번째 수부터 소수점 기호( . )를 사용할 수 없습니다.");
        obj.value = "";
        return false;
    }
    
    // 소수점이 존재하면 태우는 분기
    if(point > 0) {

        // 소수점 앞 자리값만을 따로 담는다.
        integer = number.substr(0, point);

        // 소수점 아래 자리값만을 따로 담는다.
        decimal = number.substr((point + 1), number.length);
        chekcd = inputNumberisFinit(decimal);

        if(chekcd == "N") {
            alert("문자는 입력하실 수 없습니다.");
            obj.value = "";
            return false;
        }
    }

    // 정수형의 콤마를 제거한다.
    integer = integer.replace(/\,/g, "");
    chekcd = inputNumberisFinit(integer);

    if(chekcd == "N") {
        alert("문자는 입력하실 수 없습니다.");
        obj.value = "";
        return false;
    }

    // 정수형을 한번더 점검한다.
    integer = inputNumberWithComma(inputNumberRemoveComma(integer));
    
    // 소수가 존재하면 나누었던 콤마 기호를 삽입한다.
    if(point > 0) {
        obj.value = integer + "." + decimal;
    }
    
    // 소수가 존재하지 않는다면 콤마값을 넣은 정수만 삽입한다.
    else {
        obj.value = integer;
    }
}

// 천단위 이상의 숫자에 콤마( , )를 삽입하는 함수
function inputNumberWithComma(str) {
    str = String(str);
    return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, "$1,");
}

// 콤마( , )가 들어간 값에 콤마를 제거하는 함수
function inputNumberRemoveComma(str) {
    str = String(str);
    return str.replace(/[^\d]+/g, "");
}

// 문자 여부를 확인하고 문자가 존재하면 N, 존재하지 않으면 Y를 리턴한다.
function inputNumberisFinit(str) {
    if(isFinite(str) == false) {
        return "N";
    } else {
        return "Y";
    }
}
</script>
</head>
<body>
    <h2>숫자를 입력해 주세요.</h2>
    <input type="text" onKeyup="inputNumberAutoComma(this);" value="" style="text-align:right;"/>
</body>
</html>




# 출력결과






반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] Session 데이터 읽고, 쓰기  (0) 2018.09.04
[JavaScript] Cookie 생성, 삭제 및 읽어오기  (4) 2018.09.03
[JavaScript] 전화번호 Hyphen(-)기호 자동 삽입  (7) 2018.08.21
[JavaScript] 시간(HH:MM)만을 입력하는 텍스트 박스  (3) 2018.08.17
[JavaScript] 카드번호 입력폼 예제  (0) 2018.04.18
//

티스토리툴바