[Jquery] input 실시간 감지 기능 (영상 有)

안녕하세요. 오늘은 제이쿼리를 이용하여 input칸의 실시간 감지 기능으로 작업을 정리해보았습니다.

저는 input칸의 숫자를 실시간으로 합계칸에 더해줄 예정입니다. 영상을 보시면,

각 연령대별로 input칸에 입력하면 합계에 자동 계산이 되어 나오게 됩니다.

간단하니 한번 정리해보죠!

 

---

HTML

<li class="contact_row_w100p">
    <div>
        <label class="jt_label" for=""><span class="ftcdanger fc-red">*</span>방문총인원</label>
    </div>
     <div>
     <div class="form_control_wrap mt10">
        <input type="text" class="jt_form_field mr5 wt1" value="10대" readonly="readonly" style="text-align:center;"/>
        <input type="text" id="resv_age10" name="resv_age10" class="jt_form_field wt500" />
    </div>
     <div class="form_control_wrap mt10">
         <input type="text" class="jt_form_field mr5 wt1" value="20대" readonly="readonly" style="text-align:center;"/>
        <input type="text" id="resv_age20" name="resv_age20" class="jt_form_field wt500" />
    </div>
     <div class="form_control_wrap mt10">
         <input type="text" class="jt_form_field mr5 wt1" value="30대" readonly="readonly" style="text-align:center;"/>
        <input type="text" id="resv_age30" name="resv_age30" class="jt_form_field wt500" />
    </div>
     <div class="form_control_wrap mt10">
         <input type="text" class="jt_form_field mr5 wt1" value="40대" readonly="readonly" style="text-align:center;"/>
        <input type="text" id="resv_age40" name="resv_age40" class="jt_form_field wt500" />
    </div>
     <div class="form_control_wrap mt10">
         <input type="text" class="jt_form_field mr5 wt1" value="50대 이상" readonly="readonly" style="text-align:center;"/>
        <input type="text" id="resv_age50" name="resv_age50" class="jt_form_field wt500" />
    </div>
     <div class="form_control_wrap mt10">
         <input type="text" class="jt_form_field mr5 wt1" value="합계" readonly="readonly" style="text-align:center;"/>
        <input type="text" id="resv_number" name="resv_number" class="jt_form_field wt500" readonly="readonly"/>
    </div>
    </div>
</li>
 

여기서는 평범한 HTML 태그입니다.

하나 특징이 있다면 제이쿼리에서 ID값을 가져와서 사용할 예정이기에 ID값을 구분해서 넣어주셔야합니다.

 

 

JQUERY

$(document).ready(function() {
alertResMsg(gTxt("${resMap.msg}"));
 
$("#resv_age10").on("propertychange change paste input", function() {
 
    var resv_age10 = fnReplace($("#resv_age10").val());
    var resv_age20 = fnReplace($("#resv_age20").val());
    var resv_age30 = fnReplace($("#resv_age30").val());
    var resv_age40 = fnReplace($("#resv_age40").val());
    var resv_age50 = fnReplace($("#resv_age50").val());
    
    $("#resv_number").val(resv_age10 + resv_age20 + resv_age30 + resv_age40 + resv_age50);
});
 
$("#resv_age20").on("propertychange change paste input", function() {
 
    var resv_age10 = fnReplace($("#resv_age10").val());
    var resv_age20 = fnReplace($("#resv_age20").val());
    var resv_age30 = fnReplace($("#resv_age30").val());
    var resv_age40 = fnReplace($("#resv_age40").val());
    var resv_age50 = fnReplace($("#resv_age50").val());
    
    $("#resv_number").val(resv_age10 + resv_age20 + resv_age30 + resv_age40 + resv_age50 );
});
 
$("#resv_age30").on("propertychange change paste input", function() {
 
    var resv_age10 = fnReplace($("#resv_age10").val());
    var resv_age20 = fnReplace($("#resv_age20").val());
    var resv_age30 = fnReplace($("#resv_age30").val());
    var resv_age40 = fnReplace($("#resv_age40").val());
    var resv_age50 = fnReplace($("#resv_age50").val());
    
    $("#resv_number").val(resv_age10 + resv_age20 + resv_age30 + resv_age40 + resv_age50 );
});
 
$("#resv_age40").on("propertychange change paste input", function() {
 
    var resv_age10 = fnReplace($("#resv_age10").val());
    var resv_age20 = fnReplace($("#resv_age20").val());
    var resv_age30 = fnReplace($("#resv_age30").val());
    var resv_age40 = fnReplace($("#resv_age40").val());
    var resv_age50 = fnReplace($("#resv_age50").val());
    
    $("#resv_number").val(resv_age10 + resv_age20 + resv_age30 + resv_age40 + resv_age50 );
});
 
$("#resv_age50").on("propertychange change paste input", function() {
 
    var resv_age10 = fnReplace($("#resv_age10").val());
    var resv_age20 = fnReplace($("#resv_age20").val());
    var resv_age30 = fnReplace($("#resv_age30").val());
    var resv_age40 = fnReplace($("#resv_age40").val());
    var resv_age50 = fnReplace($("#resv_age50").val());
    
    $("#resv_number").val(resv_age10 + resv_age20 + resv_age30 + resv_age40 + resv_age50 );
});
 
});
 
 
function fnReplace(val) {
    var ret = 0;
    if(typeof val != "undefined" && val != null && val != ""){
        ret = Number(val.replace(/,/gi,''));
    }
    return ret;        
}
 
 
 

제이쿼리에서 제공하는 기능이니 여기가 키포인트가 되겠네요

$("#아이디값").on("propertychange change paste input", function() {  을 하게 되면

input칸에 대한 실시간 감지하게 되는 기능을 제이쿼리에서 제공해줍니다.

 

그리고 각각의 input칸의 값을 가져올때 또하나의 중요한 점은,

숫자로 replace로 해주어 숫자 형태로 만들어줘야 합니다. 

replace를 안해주면 11 + 22 = 1122 모양이 나오게 되는거죠. 

 

각각의 input칸의 실시간 감지 함수를 만들어주고,

합계칸에 각각의 ijnput칸의 값을 더해주면 완성입니다!