SeouliteLab

jQuery focus 이벤트 이해하기: 요소에 포커스가 들어왔을 때 처리하기 본문

프로그래밍

jQuery focus 이벤트 이해하기: 요소에 포커스가 들어왔을 때 처리하기

Seoulite Lab 2024. 4. 3. 08:11

focus 이벤트는 사용자가 HTML 요소에 포커스를 주거나 해당 요소가 포커스를 받았을 때 발생합니다. jQuery를 사용하여 이벤트 핸들러를 등록하여 포커스 이벤트를 처리할 수 있습니다.

예제 1: 기본 사용법 - 입력 필드에 포커스가 들어왔을 때 메시지 출력

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

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

예제 2: 다른 이벤트와의 조합 - 입력 필드에 포커스가 들어오면 배경색 변경

<!DOCTYPE html>
<html>
<head>
  <title>jQuery focus 이벤트 예제</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").on("focus", function(){
        $(this).addClass("focused");
      });
    });
  </script>
</head>
<body>
  <input type="text" placeholder="이름을 입력하세요">
</body>
</html>

설명: 이 예제에서는 사용자가 입력 필드에 포커스를 주면 입력 필드의 배경색이 노란색으로 변경됩니다.

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

<!DOCTYPE html>
<html>
<head>
  <title>jQuery focus 이벤트 예제</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, textarea").on("focus", function(){
        $(this).addClass("focused");
      });
    });
  </script>
</head>
<body>
  <input type="text" placeholder="이름을 입력하세요">
  <textarea placeholder="메시지를 입력하세요"></textarea>
</body>
</html>

설명: 이 예제에서는 입력 필드와 텍스트 영역 두 가지 요소에 대해서 포커스 이벤트를 처리합니다. 포커스가 들어오면 해당 요소의 배경색이 노란색으로 변경됩니다.

예제 4: 이벤트 위임을 사용한 포커스 이벤트 처리

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

설명: 이 예제에서는 이벤트 위임을 사용하여 form 요소 안의 모든 input 요소에 대한 포커스 이벤트를 처리합니다.

예제 5: 포커스 아웃 이벤트와 조합하여 처리하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery focus 이벤트 예제</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").on("focus", function(){
        $(this).addClass("focused");
      });

      $("input").on("blur", function(){
        $(this).removeClass("focused");
      });
    });
  </script>
</head>
<body>
  <input type="text" placeholder="이름을 입력하세요">
</body>
</html>

설명: 이 예제에서는 포커스가 들어오면 입력 필드의 배경색이 노란색으로 변경되고, 포커스가 나가면 다시 원래대

로 돌아갑니다.

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

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

jQuery .focusin() 메서드 이해하기: 요소에 포커스가 들어왔을 때 처리하기  (0) 2024.04.03
jQuery .focus() 메서드 이해하기: 요소에 포커스 주기  (0) 2024.04.03
jQuery event.which 속성 이해하기: 키 코드 식별하기  (0) 2024.04.03
jQuery event.type 속성 이해하기: 이벤트 유형 식별하기  (0) 2024.04.03
jQuery event.timeStamp 속성 이해하기: 이벤트 발생 시간 파악하기  (0) 2024.04.03
'프로그래밍' Related Articles more