SeouliteLab

jQuery .focusout() 메서드 이해하기: 요소가 포커스를 잃었을 때 처리하기 본문

프로그래밍

jQuery .focusout() 메서드 이해하기: 요소가 포커스를 잃었을 때 처리하기

Seoulite Lab 2024. 4. 3. 08:14

focusout() 메서드는 jQuery에서 사용되며, 선택한 요소나 해당 요소의 하위 요소가 포커스를 잃었을 때 이를 감지합니다. 이를 통해 포커스가 떠난 후의 작업을 처리할 수 있습니다.

예제 1: 입력 필드에서 포커스가 떠날 때 메시지 출력

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

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

예제 2: 포커스가 떠난 후에도 입력 필드에 유효성 검사하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .focusout() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("input").focusout(function(){
        var value = $(this).val();
        if(value === ""){
          alert("입력 필드는 비워둘 수 없습니다.");
        }
      });
    });
  </script>
</head>
<body>
  <input type="text" placeholder="이름을 입력하세요">
</body>
</html>

설명: 이 예제에서는 입력 필드에서 포커스가 떠난 후에도 입력 값이 비어있는지 유효성을 검사하여 경고창이 나타납니다.

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

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

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

예제 4: 포커스가 떠난 후에 CSS 스타일 변경하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .focusout() 메서드 예제</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").focusout(function(){
        $(this).removeClass("focused");
      });
    });
  </script>
</head>
<body>
  <input type="text" class="focused" placeholder="이름을 입력하세요">
</body>
</html>

설명: 이 예제에서는 입력 필드에서 포커스가 떠나면 배경색이 노란색에서 제거됩니다.

예제 5: 포커스가 떠난 후 특정 조건에서 다른 요소에 포커스 주기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .focusout() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("input").focusout(function(){
        var value = $(this).val();
        if(value === ""){
          $("#username").focus();
        }
      });
    });
  </script>
</head>
<body>
  <input type="text" id="username" placeholder="사용자 이름을 입력하세요">
  <input type="text" placeholder="비밀번호를 입력하세요">
</body>
</html>

설명: 이 예제에서는 입력 필드에서 포커스가 떠난 후에도 유효성 검사를 수행하고, 만약 값이 비어있다면 다른 입력 필드에 포커스를 주게 됩니다.

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

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

jQuery jQuery.holdReady() 메서드 이해하기: 문서 준비 이벤트 제어하기  (0) 2024.04.03
jQuery .hover() 메서드 이해하기: 요소에 마우스를 올렸을 때 처리하기  (0) 2024.04.03
jQuery .focusin() 메서드 이해하기: 요소에 포커스가 들어왔을 때 처리하기  (0) 2024.04.03
jQuery .focus() 메서드 이해하기: 요소에 포커스 주기  (0) 2024.04.03
jQuery focus 이벤트 이해하기: 요소에 포커스가 들어왔을 때 처리하기  (0) 2024.04.03
'프로그래밍' Related Articles more