jQuery focusout() Method

jQuery focusout() method trigger the focusout event. The jQuery focusout event occurs when an element (or any elements inside it) loses focus. And when the focusout event occurs, specified function will execute.

jQuery blur() method trigger on the selected element. Where as jQuery focusout() method trigger on the selected element including any child elements inside it.

Syntax

This triggers the focusout event for selected elements or any child elements inside it.

$(selector).focusout();        // This syntax does not accept any arguments.

This attach a function to the focusout event.

$(selector).focusout(function);
Parameter Type Description
function Function Optional. Specifies the function to execute when the focusout event is occurs.

Examples

This example represents the focusout() event.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery focusin() and focusout() method</title>
  <script src="jquery-latest.min.js"></script>
  <script>
    $(document).ready(function(){
      $("div").focusin(function(){
        $(this).css("background-color", "yellow");
      });
      $("div").focusout(function(){
        $(this).css("background-color", "white");
      });
    });
  </script>
</head>
<body>
  <p>Click on following text field to occur focusin or focusout events.</p> 
  <div style="padding:15px 10px;">
    Name: <input type="text" name="name" />
  </div>
  <div style="padding:15px 10px;">
    E-mail: <input type="text" name="email" />
  </div>
  <div style="padding:15px 10px;">
    Phone: <input type="text" name="phone" />
  </div>
</body> 
</html>

Run it...   »