SeouliteLab

jQuery .blur() 메소드를 활용한 이벤트 처리 본문

프로그래밍

jQuery .blur() 메소드를 활용한 이벤트 처리

Seoulite Lab 2024. 4. 2. 08:20

jQuery의 .blur() 메소드는 요소가 포커스를 잃을 때 발생하는 이벤트에 이벤트 핸들러를 연결하는 데 사용됩니다. 이 메소드는 특히 폼 입력 필드의 유효성을 검사하거나 사용자가 특정 요소에서 벗어날 때 작업을 트리거하거나 데이터를 동적으로 업데이트하는 데 유용합니다.

예제 1: 입력 포커스 변경 처리

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .blur() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#myInput').blur(function(){
        alert('입력 필드가 포커스를 잃었습니다!');
      });
    });
  </script>
</head>
<body>

<input type="text" id="myInput" placeholder="무언가를 입력하세요...">

</body>
</html>
  • 입력 필드가 포커스를 잃으면 "입력 필드가 포커스를 잃었습니다!" 라는 경고창이 나타납니다.

설명:
이 예제에서는 .blur() 메소드를 사용하여 myInput ID를 가진 입력 필드에 blur 이벤트 핸들러를 추가합니다. 입력 필드가 포커스를 잃으면 경고 메시지가 표시됩니다.

예제 2: 입력 필드 유효성 검사

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .blur() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#email').blur(function(){
        var email = $(this).val();
        if(email === '') {
          alert('이메일을 입력하세요!');
        }
      });
    });
  </script>
</head>
<body>

<input type="email" id="email" placeholder="이메일을 입력하세요...">

</body>
</html>
  • 입력 필드가 비어 있을 때 "이메일을 입력하세요!" 라는 경고창이 나타납니다.

설명:
이 예제에서는 .blur() 메소드를 사용하여 email ID를 가진 입력 필드에 blur 이벤트 핸들러를 추가합니다. 입력 필드가 포커스를 잃으면 입력된 값이 비어 있는지 확인하여 비어 있으면 경고 메시지가 표시됩니다.

예제 3: 동적 데이터 업데이트

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .blur() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#username').blur(function(){
        var username = $(this).val();
        $('#display').text('사용자 이름: ' + username);
      });
    });
  </script>
</head>
<body>

<input type="text" id="username" placeholder="사용자 이름을 입력하세요...">
<div id="display"></div>

</body>
</html>
  • 입력 필드에 사용자 이름을 입력할 때마다 입력된 사용자 이름이 표시됩니다.

이 예제에서는 .blur() 메소드를 사용하여 username ID를 가진 입력 필드에 blur 이벤트 핸들러를 추가합니다. 입력 필드가 포커스를 잃으면 입력된 사용자 이름이 display 요소에 텍스트로 표시됩니다.

jQuery의 .blur() 메소드를 사용하면 요소의 포커스가 사라질 때 실행되는 이벤트를 쉽게 처리할 수 있습니다. 이를 활용하여 사용자 경험을 향상시키고 폼 유효성을 검사하거나 동적으로 데이터를 업데이트할 수 있습니다.

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

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

클릭 이벤트 처리를 위한 jQuery .click() 메소드  (0) 2024.04.02
jQuery .change() 메소드를 활용한 이벤트 처리  (0) 2024.04.02
jQuery .bind() 메소드를 활용한 이벤트 처리  (0) 2024.04.02
파이썬의 Union 타입: 다양한 타입의 유연한 결합  (0) 2024.04.01
파이썬의 Generic 타입: 다양한 타입의 유연한 지원  (0) 2024.04.01
'프로그래밍' Related Articles more