입력 양식 이벤트

focus() : 요소가 focus를 받을 때

blur() : 요소의 focus가 해제 되었을 때

change() : 요소의 값이 변경 되었을 때

select, checkbox, radio에서 쓰는 change()와는 달리

Input, textarea에서 쓰는 change()는 입력될 때 변화가 바로바로 일어나는걸 의미하는것이 아니라 변화가 생기고 focus를 잃을 때 발생

select() : 텍스트 영역 블럭 잡힌 경우

 

ex.

text type의 input태그에 글자를 입력하고 이벤트가 일어나는지 콘솔창으로 확인해보기

  <div id="wrap">
      <h1>회원가입</h1>
      <form method="post" action="">
         <table>
            <tr>
               <td><label>이름</label></td>
               <td><input type="text" name="name" id="name" required></td>
               <td><span id="nameresult"></span></td>
            </tr>
            <tr>
               <td><label>아이디</label></td>
               <td><input type="text" name="userid" id="userid" required></td>
               <td><input type="button" value="중복확인"></td>
            </tr>
            <tr>
               <td><label>비밀번호</label></td>
               <td><input type="password" name="pwd1" id="pwd1" required></td>
               <td><span id="pwdresult"></span></td>
            </tr>
            <tr>
               <td><label>비밀번호확인</label></td>
               <td><input type="password" name="pwd2" id="pwd2" required></td>
               <td></td>
            </tr>
            <tr>
               <td><label>이메일</label></td> 
               <td><input type="email" name="email" id="email" required></td> 
               <!--이메일 타입은 자동으로 유효성 검사해줌 *@*-->
               <td></td>
            </tr>
            <tr>
               <td></td>
               <td><input type="reset"> &nbsp; <input type="submit"></td>
               <td></td>
            </tr>
         </table>
      </form>
   </div>
   
    <script>
       $(function(){
           $("#name").focus(function(){
               // 요소가 focus를 받을 때
               console.log('FOCUS');
           }).blur(function(){
               // 요소의 focus가 해제 되었을 때
               console.log('BLUR');
           }).change(function(){
               // 요소의 값이 변경 되었을 때
               console.log('CHANGE');
           }).select(function(){
               // 텍스트 영역 블럭 잡힌 경우
               console.log('SELECT');
           });
       });

   </script>

회원가입 폼을 만들어 테스트

이름 입력칸에 글자 입력 후 블럭 씌움

 

이후 콘솔창 확인

(순서) 

입력칸 누르고 -> focus

값 입력 후 입력칸 나옴 -> change -> blur

입력칸 다시 누름 -> focus

글자 블럭 씌움 -> select

 

 

---

 

 

focusin() / focusout() : 해당 요소와 자식 요소가 포커스를 가지면 발생함

ex.

input 태그에 커서 focus시 배경색 바뀌게 해봄

 



 

---

 

 

동적으로 이름 유효성 검사 / 비밀번호 일치성 여부 검사