[javascript]사용자를 편의를 위한 숫자 콤마 찍기 구성

< 조건 >

 

사용자가 숫자입력시 13자의 숫자만을 허용하고, 사용자가 입력후 포커스가 아웃되면 콤마가 찍히게 끔 구성 (단, 서버로 값을 넘기기전 콤마를 제거한다.)

 

 

<form name="frm_edit" id="frm_edit" action="<?php echo $href_update ?>" method="POST" onsubmit="frm_submit()">

<tr>
                <th>판매단가1</th>
                <td><input type="money" class="comma" onclick="focusOn(this)" onfocusout="focusOut(this)" onkeyup="inputNumberFormat(this)" name="price" value="<?php echo number_format($row['price']) ?>" maxlength='13'></td>
                <th>판매단가2</th>
                <td><input type="text" class="comma" onclick="focusOn(this)" onfocusout="focusOut(this)" onkeyup="inputNumberFormat(this)" name="price2" value="<?php echo number_format($row['price2']) ?>" maxlength='13'></td>
</tr>

</form>



<script>
    function frm_submit(){
        // 콤마제거후 값을 서버로..
        var x = document.querySelectorAll(".comma");
        for (var i = 0; i < x.length; i++) {
            //x[i].value = x[i].value.replace(/[^\d]+/g, '');
            x[i].value = x[i].value.replace(/[^-\.0-9]/g, '');            
        }        
    }
    
       // focus on되는 순간 숫자에 콤마 제거
    function focusOn(ctl) {
        // var x = document.querySelectorAll(".comma");
        // for (var i = 0; i < x.length; i++) {            
        //     //x[i].value = x[i].value.replace(/[^\d]+/g, '');
        //     x[i].value = x[i].value.replace(/[^-\.0-9]/g, '');
        // }      
        ctl.value = ctl.value.replace(/[^\d]+/g, '');
        //console.log(ctl.value);
        return false;
    }
    // focus out되는 순간 숫자에 콤마 생성
    function focusOut(ctl) {
        // var x = document.querySelectorAll(".comma");
        // for (var i = 0; i < x.length; i++) {
        //     x[i].value = x[i].value.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
        // }        
        //ctl.value = ctl.value.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');    
        var k = Number(ctl.value);      
        ctl.value = k.toLocaleString();     
    } 

    // 금액관련포맷 방법1 : javascript 사용,  실시간으로 숫자만 입력가능한 동시에 숫자에 콤마 제거하고,
    
    function inputNumberFormat(obj) {
        obj.value = uncomma(obj.value);
    }
    // function comma(str) {
    //     str = String(str);
    //     return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
    // }
    function uncomma(str) {
        str = String(str); 
        // console.log(str.length);
        // return false;
        return str.replace(/[^\d]+/g, '');
        //return str.replace(/^[0-9]{10}*$+/g, '');
    }

 

 

클린버전

 

<form name="frm_edit" id="frm_edit" action="<?php echo $href_update ?>" method="POST" onsubmit="frm_submit()">

<tr>
                <th>판매단가1</th>
                <td><input type="money" class="comma" onclick="focusOn(this)" onfocusout="focusOut(this)" onkeyup="inputNumberFormat(this)" name="price" value="<?php echo number_format($row['price']) ?>" maxlength='13'></td>
                <th>판매단가2</th>
                <td><input type="text" class="comma" onclick="focusOn(this)" onfocusout="focusOut(this)" onkeyup="inputNumberFormat(this)" name="price2" value="<?php echo number_format($row['price2']) ?>" maxlength='13'></td>
</tr>

</form>



<script>
    function frm_submit(){
        // 콤마제거후 값을 서버로..
        var x = document.querySelectorAll(".comma");
        for (var i = 0; i < x.length; i++) {            
            x[i].value = x[i].value.replace(/[^-\.0-9]/g, '');            
        }        
    }
    
       // focus on되는 순간 숫자에 콤마 제거
    function focusOn(ctl) {
        ctl.value = ctl.value.replace(/[^\d]+/g, '');
        return false;
    }
    // focus out되는 순간 숫자에 콤마 생성
    function focusOut(ctl) {
         var k = Number(ctl.value);      
        ctl.value = k.toLocaleString();     
    } 

    // 금액관련포맷 방법1 : javascript 사용,  실시간으로 숫자만 입력가능한 동시에 숫자에 콤마 제거하고,
    
    function inputNumberFormat(obj) {
        obj.value = uncomma(obj.value);
    }
    function uncomma(str) {
        str = String(str); 
        return str.replace(/[^\d]+/g, '');
    }