Javascript - JQuery를 이용해서 Input 값 변경 실시간 감지

 Input 타입에는 여러 가지가 있습니다. select, checkbox, text, password 등 수 많은 타입을 내장하고 있는데, select나 checkbox 같은 경우에는 값의 변경을 단순히 onchange로도 확인할 수 있습니다. 다만, text나 textarea의 경우에는 값을 적고 있을 때에는 onchange로는 값의 변경을 감지할 수 없습니다. 왜냐하면 onchange 이벤트가 걸리는 시점이 blur(focus와 반대로 오브젝트를 떠나는 시점)이기 때문입니다. 따라서 onchange로는 text나 textarea의 실시간 값 변경을 감지할 수 없습니다. 업무를 하던 중에 실시간으로 값의 변경을 감지해서 앞의 10글자 정도는 고정으로 가져가도록 유지하게 해야하는 때가 있었는데 찾아보니 아래와 같은 방법이 있었습니다.

//예전 jQuery라면 on이 아니라 bind나 live 
$("#text").on("change keyup paste", function() {
    var currentVal = $(this).val();
    if(currentVal == oldVal) {
        return;
    }
 
    oldVal = currentVal;
    alert("changed!");
});

 

 

 위 방법이 매우 잘 먹히긴 했는데 한 가지 문제가 있었습니다. 값을 적어 넣거나 붙여넣기, 값 변경 등 일반인들이 할 수 있는 모든 방법은 잘 막았으나 F12로 개발자 모드로 들어가서 직접 값을 변경해주면 그 때는 감지를 하지 못했습니다. 그래서 더 구글에서 찾아보니 아래와 같은 방법이 있었습니다.

 

//예전 jQuery라면 on이 아니라 bind나 live 
$("#text").on("propertychange change keyup paste input", function() {
    var currentVal = $(this).val();
    if(currentVal == oldVal) {
        return;
    }
 
    oldVal = currentVal;
    alert("changed!");
});
 

 

 위 방식으로 적용하면 값이 변경되는 모든 순간을 감지할 수 있습니다. 유용하게 쓰시기 바랍니다.