[Jquery] focusin(), focusout() - 키보드 이벤트

      

 

.focusin() 메소드와 .focusout() 메소드

focusin() 메소드    : focus가 들어갔을 때 이벤트 발생

focusout() 메소드 : focus가 빠져나왔을 때 이벤트 발생

 

저렇게 설명하면 무슨 소리인지 이해하기 어려우니 간단한 예제를 통하여 이해를 돕도록 하겠습니다.

<script>
    $(function() {
        $("#focus").on("focusin", function(event) { // 아이디가 "focus"인 요소에 focusin 이벤트를 설정함.
            $(this).css("backgroundColor", "yellow");
        });
        $("#focus").on("foucusout", function(event) { // 아이디가 "focus"인 요소에 focusout 이벤트를 설정함.
            $(this).css("backgroundColor", "white");
        })
    })
</script>

<h1>.keypress() 메소드</h1>

<h1>.focusin()과 .focusout() 메소드</h1>
<p>아래 텍스트 필드를 마우스로 클릭해 보세요!</p>
<input type="text" id="focus">

 

출력 결과

 

<input> 요소에 포커스가 맞춰져 있으면 노란색으로 배경이 바뀌고,

<input> 요소에 포커스가 맞춰져 있지 않으면 흰색으로 배경이 바뀌는 예제였습니다.