SeouliteLab

jQuery .focusin() 메서드 이해하기: 요소에 포커스가 들어왔을 때 처리하기 본문

프로그래밍

jQuery .focusin() 메서드 이해하기: 요소에 포커스가 들어왔을 때 처리하기

Seoulite Lab 2024. 4. 3. 08:13

focusin() 메서드는 jQuery에서 사용되며, 선택한 요소 또는 해당 요소의 하위 요소에 포커스가 들어왔을 때 이를 감지합니다. 이를 통해 포커스 이벤트를 처리하고 필요한 작업을 수행할 수 있습니다.

예제 1: 입력 필드에 포커스가 들어왔을 때 메시지 출력

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .focusin() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("input").focusin(function(){
        alert("입력 필드에 포커스가 들어왔습니다.");
      });
    });
  </script>
</head>
<body>
  <input type="text" placeholder="이름을 입력하세요">
</body>
</html>

설명: 이 예제에서는 입력 필드에 포커스가 들어오면 "입력 필드에 포커스가 들어왔습니다."라는 경고창이 나타납니다.

예제 2: 다른 요소에 포커스가 들어왔을 때 메시지 출력

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .focusin() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("form").focusin(function(){
        alert("폼 요소에 포커스가 들어왔습니다.");
      });
    });
  </script>
</head>
<body>
  <form>
    <input type="text" placeholder="이름을 입력하세요">
    <button type="submit">전송</button>
  </form>
</body>
</html>

설명: 이 예제에서는 폼 요소에 포커스가 들어오면 "폼 요소에 포커스가 들어왔습니다."라는 경고창이 나타납니다.

예제 3: 이벤트 위임을 사용하여 하위 요소에도 적용하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .focusin() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("form").on("focusin", "input", function(){
        alert("입력 필드에 포커스가 들어왔습니다.");
      });
    });
  </script>
</head>
<body>
  <form>
    <input type="text" placeholder="이름을 입력하세요">
    <input type="email" placeholder="이메일을 입력하세요">
  </form>
</body>
</html>

설명: 이 예제에서는 이벤트 위임을 사용하여 폼 안의 모든 입력 필드에 포커스가 들어오면 "입력 필드에 포커스가 들어왔습니다."라는 경고창이 나타납니다.

예제 4: 포커스가 들어온 요소에 CSS 스타일 적용하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .focusin() 메서드 예제</title>
  <style>
    .focused {
      background-color: yellow;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("input").focusin(function(){
        $(this).addClass("focused");
      });
    });
  </script>
</head>
<body>
  <input type="text" placeholder="이름을 입력하세요">
</body>
</html>

설명: 이 예제에서는 입력 필드에 포커스가 들어오면 배경색이 노란색으로 변경됩니다.

예제 5: 여러 요소에 대한 포커스 이벤트 처리

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .focusin() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("input, textarea").focusin(function(){
        alert("입력 필드에 포커스가 들어왔습니다.");
      });
    });
  </script>
</head>
<body>
  <input type="text" placeholder="이름을 입력하세요">
  <textarea placeholder="메시지를 입력하세요"></textarea>
</body>
</html>

설명: 이 예제에서는 입력 필드와 텍스트 영역 두 가지 요소에 대해서 포커스 이벤트를 처리합니다.

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery .hover() 메서드 이해하기: 요소에 마우스를 올렸을 때 처리하기  (0) 2024.04.03
jQuery .focusout() 메서드 이해하기: 요소가 포커스를 잃었을 때 처리하기  (0) 2024.04.03
jQuery .focus() 메서드 이해하기: 요소에 포커스 주기  (0) 2024.04.03
jQuery focus 이벤트 이해하기: 요소에 포커스가 들어왔을 때 처리하기  (0) 2024.04.03
jQuery event.which 속성 이해하기: 키 코드 식별하기  (0) 2024.04.03
'프로그래밍' Related Articles more