JavaScript

JavaScript - .focus(), .blur()

루바의 여정 2024. 4. 8. 01:54

회원 가입을 진행할 때 아이디, 비밀번호를 입력하고 유효성 검사가 바로 진행되는 경우가 있다.

이때 사용되는 focus, blur에 대해서 알아보자.


1. focus

  • 사용자가 클릭하거나 tab 키를 눌러 어떠한 요소가 포커스 되었을 때 발생한다.
  • 해당 요소를 전달한다.
  • focus() 메서드 사용 시 해당 요소에 포커스를 줄 수 있다.

 

https://api.jquery.com/focus/

 

focus event | jQuery API Documentation

Description: Bind an event handler to the "focus" event. This page describes the focus event. For the deprecated .focus() method, see .focus(). The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set

api.jquery.com


2. blur

  • 어떤한 요소가 포커스를 잃을 때 발생한다.
  • 해당 요소를 전달한다.
  • blur() 메서드 사용 시 해당 요소에 포커스를 제거할 수 있다.

email이라는 ID를 가진 요소가 포커스를 잃을 때마다 함수가 실행되는 코드

<input type="email" placeholder="아이디(이메일)" id="email">

<script>
$('#email').blur(function (){
            // 실행 내용
        });
</script>

 

 

 

https://api.jquery.com/blur/

 

blur event | jQuery API Documentation

Description: Bind an event handler to the "blur" event. This page describes the blur event. For the deprecated .blur() method, see .blur(). The blur event is sent to an element when it loses focus. Originally, this event was only applicable to form element

api.jquery.com

 

'JavaScript' 카테고리의 다른 글

[JavaScript] event.keyCode 코드표  (0) 2024.05.07