티스토리 뷰 Input 타입에는 여러 가지가 있습니다. select, checkbox, text, password 등 수 많은 타입을 내장하고 있는데, select나 checkbox 같은 경우에는 값의 변경을 단순히 onchange로도 확인할 수 있습니다. 다만, text나 textarea의 경우에는 값을 적고 있을 때에는 onchange로는 값의 변경을 감지할 수 없습니다. 왜냐하면 onchange 이벤트가 걸리는 시점이 blur(focus와 반대로 오브젝트를 떠나는 시점)이기 때문입니다. 따라서 onchange로는 text나 textarea의 실시간 값 변경을 감지할 수 없습니다. 업무를 하던 중에 실시간으로 값의 변경을 감지해서 앞의 10글자 정도는 고정으로 가져가도록 유지하게 해야하는 때가 있었는데 찾아보니 아래와 같은 방법이
있었습니다.
위 방법이 매우 잘 먹히긴 했는데 한 가지 문제가 있었습니다. 값을 적어 넣거나 붙여넣기, 값 변경 등 일반인들이 할 수 있는 모든 방법은 잘 막았으나 F12로 개발자 모드로 들어가서 직접 값을 변경해주면 그 때는 감지를 하지 못했습니다. 그래서 더 구글에서 찾아보니 아래와 같은 방법이 있었습니다.
위 방식으로 적용하면 값이 변경되는 모든 순간을 감지할 수 있습니다. 유용하게 쓰시기 바랍니다. jquery change 및 선택자로 알아보기 jQuery change 함수를 알아보겠습니다.아래와 같이 input 4개가 있을 때, 첫번째, id로 접근하는 방법 두번째, class로 접근하는 방법 세번째, id로 두개의 값이 변경되었을 때 확인하는 방법 네번째, 전체 input에서 변경이 일어났을 때 확인하는 방법을 알아보겠습니다. <label>이름 : </label> <input id="name" class="input_change" value="이름"/> <label>닉네임 : </label> <input id="nickname" class="input_change" value="닉네임"/> <label>취미 : </label> <input id="hobby" class="input_change" value="hobby"/> <label>전공 : </label> <input id="major" value="전공"/> 첫번째
- id로 접근하는 방법 input id=""로 값을 지정해줍니다. <label>이름 : </label> <input id="name" class="input_change" value="이름"/> <label>닉네임 : </label> <input id="nickname" class="input_change" value="닉네임"/> $("#id").change(function(){ //실행할 내용 }); 아래와 같이 작성하시면 input에서 값이 변경이 일어나는 경우 alert창을 통해서 감지가 되었음을 알 수 있습니다. $("#name").change(function(){ alert("id name 값이 변경되었습니다."); }); $("#nickname").change(function(){ alert("nickname 값이 변경되었습니다."); }); 두번째 - class로 접근하는 방법 class =""로 값을 지정해줍니다. <label>이름 : </label> <input id="name" class="input_change" value="이름"/> <label>닉네임 : </label> <input id="nickname" class="input_change" value="닉네임"/> <label>취미 : </label> <input id="hobby" class="input_change" value="hobby"/> $(".class").change(function(){ //실행할 내용 }); id에는 #이 붙지만 , class의 경우 . 이 붙는다는 사실 잊지마세요 class = input_change가 붙은 input 이름 , 닉네임 , 취미 에서는 값이 변경되면 alert 창이 실행됩니다. $(".input_change").change(function(){ alert("class로 묶인 .input_change 변경되었습니다."); }); 세번째 - id로 두개의 input 접근하는 방법 id ="" 값을 지정해줍니다. <label>이름 : </label> <input id="name" class="input_change" value="이름"/> <label>전공 : </label> <input id="major" value="전공"/> $("#id,#id").change(function(){ //실행할 내용 }); input 두개의 input의 id를 Comma(,)로 이어주시면, 이름과 전공에서 값이 변경될시 alert창이 실행됩니다. $("#id,#major").change(function(){ alert("major 또는 id 값이 변경되었습니다."); }); 네번째 - 모든 input 접근하는 방법 따로, 지정하실 필요가 없습니다. $("input").change(function(){ //실행할 내용 }); 모든 input 값이 변경될시 alert창이 실행됩니다. $("input").change(function(){ alert("input 어딘가에서 값이 변경되었습니다."); }); 결과화면 See the Pen input_change by Nami (@NamuNami) on CodePen. 도움이 되셨다면, 구독과 좋아요.... 아니아니 ... 공감 버튼 꾸욱 눌러주세요 ~~ |