jQuery 양식 이벤트 focus() 및 Blur() 이벤트

focus() 이벤트

정의 및 사용법

포커스 이벤트는 요소가 포커스를 얻을 때 발생합니다.

마우스 클릭으로 요소를 선택하거나 탭 키로 위치를 지정하면 해당 요소에 초점이 맞춰집니다.

focus() 메서드는 포커스 이벤트를 트리거하거나 포커스 이벤트가 발생할 때 실행할 함수를 지정합니다.

blur() 이벤트

정의 및 사용법

blur 이벤트는 요소가 포커스를 잃을 때 발생합니다.

blur() 함수는 흐림 이벤트를 트리거하거나, 함수 매개변수가 설정된 경우 흐림 이벤트가 발생할 때 실행될 코드를 함수에서 지정할 수도 있습니다.

팁: 이전에는 흐림 이벤트가 양식 요소에서만 발생했습니다. 새 브라우저에서는 이 이벤트를 모든 요소에서 사용할 수 있습니다.

아래 예를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    请输入：<input type="text">

    <script>
        $('input').focus(function(){
            $('input').css('background',"red");
        })

        $('input').blur(function(){
            $('input').css('background',"green");
        })
    </script>
</body>
</html>

텍스트 상자를 클릭하면 텍스트 상자가 포커스를 받고 배경색이 빨간색으로 변합니다.

텍스트 상자 외부를 클릭하면 텍스트 상자가 포커스를 잃고 녹색으로 변합니다

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> 请输入：<input type="text"> <script> $('input').focus(function(){ $('input').css('background',"red"); }) $('input').blur(function(){ $('input').css('background',"green"); }) </script> </body> </html>

제출하다 코드 재설정

자동운전