[jquery] 이벤트 객체 - 포커스 이벤트

 

포커스 이벤트

focus() / blur() / focusin() / focusout() 이벤트 메서드

focus()	대상 요소로 포커스가 이동하면 이벤트를 발생.
blur()	포커스가 대상 요소에서 다른 요소로 이동하면 이벤트를 발생.
focusin()	대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트를 발생.
focusout()	대상 요소의 하위 요소 중 입력 요소에서 외부 요소로 이동하면 이벤트 발생.

 

focus / blur / focusin / focusout 기본형

 

1. focus() / blur() / focusin() / focusout() 이벤트 등록

$("이벤트 대상 선택").focus(function(){자바스크립트 코드;});

$("이벤트 대상 선택").on("focus", function(){자바스크립트 코드;});

 

2. focus() / blur() / focusin() / focusout() 이벤트 강제 발생

$("이벤트 대상 선택").focus();

 

 

$(function(){
  $("#user_id_1 , #user_pw_1").on("focus",
    function(){
      $(this).css({
      "background-color":"pink"
    });
  });
  $("user_id_1 , #user_pw_1").on("blur",
    function(){
      $(this).css({
      "background-color":"#fff"
    });
  }); //->포커스가 입력요소로 이동하면 배경색을 분홍색으로 변경

  $("#frm_2").on("focusin",
    function(){
      $(this).css({
      "background-color":"pink"
    });
  });
  $("#frm_2").on("focusout",
    function(){
      $(this).css({
      "background-color":"#FFF"
    });
  }); //-> 포커스가 이벤트 대상 요소에서 입력 요소로 이동하면 frm_2의 배경을 분홍색으로 변경
});

<h1>focus / blur</h1>
<form action="#">
  <p>
    <label for="user_id_1">ID</label>
    <input type="text" name="user_id_1" id="user_id_1">
  </p>
  <p>
    <label for="user_pw_1">PW</label>
    <input type="password" name="user_pw_1" id="user_pw_1">
  </p>
  </form>
<h1>focusin / focusout</h1>
<form action="#" id="frm_2">
  <p>
    <label for="user_id_2">ID</label>
    <input type="text" name="user_id_2" id="user_id_2">
  </p>
  <p>
    <label for="user_pw_2">PW</label>
    <input type="password" name="user_pw_2" id="user_pw_2">
  </p>
</form>

포커스가 입력요소로 이동하면 배경색을 분홍색으로 변경

포커스가 이벤트 대상 요소에서 입력 요소로 이동하면 frm_2의 배경을 분홍색으로 변경